Search This Blog
Sudah dijelaskan pada artikel sebelumnya bahwa website
statis yaitu website yang isinya bersifat statis. Web ini sangat cocok untuk
perusahaan berskala kecil yang ingin memberikan informasi singkat mengenai keberadaan
perusahaan, produk atau jasa yang diberikan.
Nah, sekarang kita akan mulai membuat website statis itu.
Adapun software yang kita perlukan untuk membuat dan mengeksekusi website,
yaitu :
a.
Dreamweaver (yang saya gunakan yaitu Adobe
Dreamweaver CS6)
b.
Browser (Seperti Firefox, Chrome, atau Internet
Explorer versi baru)
Sebelum itu, kita harus download dulu berkas yang berisi
gambarnya, linknya yang ada dibawah gambar.
Lalu Simpan folder "media" pada Dreamweaver Site folder anda
Kita harus tahu dulu dimana tata letak webnya dengan cara
membuat sketsa layout diatas kertas.
Ketika kita sudah tahu sketsa layout, kita mulai membuat
website. Disini, saya membuatnya dengan kode HTML. Dibawah inilah kode
HTML-nya.
Pertama : kita akan mengatur atribut websitenya.
Kedua : kita buat ruang layoutnya menggunakan Div tag ditempatkan didalam
kode <body>...</body>.
<div class="wrapper">
</div>
Ketiga : kita akan buat Header dan navigasi-nya dan ditempatkan di
dalam kode div tag yg sudah dibuat.
<header>
<h1>Ilham Blog </h1>
<nav>
<ul>
<li><a
href="">Home</a></li>
<li><a
href="">Designs</a>
<ul>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
</ul>
</li>
<li><a
href="">Tutorials</a>
<ul>
<li><a
href="">Getting Ready</a></li>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
<li><a
href="">Publication</a></li>
<li><a
href="">Hosting</a></li>
</ul>
</li>
<li><a
href="">Downloads</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</header>
Keempat : kita akan membuat layout isi/konten pada website dan
ditempatkan di dalam div tag dibawah kode </header>.
<section class="content">
<article>
<figure>
<img src="media/css2.jpg" width="246"
height="195" />
</figure>
<h3>Mengenal CSS Style</h3>
<p>Cascade Style Sheets (atau biasa disebut CSS Style) adalah
suatu aturan yang digunakan untuk menentukan font pada tulisan yang akan
ditampilkan dalam bentuk HTML atau dokumen web lainnya.</p>
<p> </p>
</article>
</section>
Kelima : kita akan membuat layout Sidebar atau aside yang ditempatkan
didalam div tag dibawah kode </section>
<aside>
<section>
<banner>Related Post</banner>
<a
href="">Designs</a>
<a
href="">Tutorials</a>
<a
href="">Downloads</a>
<a
href="">Static Page</a>
<a
href="">Dynamic Page</a>
<a
href="">Publication</a>
<a
href="">Hosting</a>
</section>
</aside>
Keenam : kita akan membuat footer ditempatkan didalam div tag dibawah
kode </aside>
<footer><a href="">Home</a>
</footer>
Kode-nya hampir siap. Dibawah ini adalah website yang sudah dihasilkan
tapi belum sempurna karena belum diberi CSS style dan gambar
Dibawah ini adalah kode CSS untuk website yang setengah jadi. Letakkan kode
ini di dalam kode <head> dibawah kode <title>.
<style type="text/css">
.wrapper {
background-color:
#FFF;
width: 900px;
margin-top: 10px;
margin-right:
auto;
margin-bottom:
10px;
margin-left: auto;
}
header {
font-weight: bold;
display: block;
clear: both;
padding-top: 1px;
padding-bottom:
1px;
font-size: 24px;
padding-right:
0px;
padding-left: 0px;
}
nav ul {
font-size: 14px;
font-weight: bold;
background-color:
#666;
display: block;
padding-top: 0px;
padding-right:
0px;
padding-bottom:
22px;
padding-left: 0px;
border-top-width:
1px;
border-top-style:
solid;
border-top-color:
#fff;
list-style-type:
none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
color: #FFF;
text-decoration:
none;
background-color:
#666;
white-space:
nowrap;
display: block;
margin-left: 1px;
padding-top: 2px;
padding-right:
40px;
padding-bottom:
2px;
padding-left:
40px;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#FFF;
}
article {
margin-top: 0px;
margin-right: 0px;
margin-bottom:
20px;
margin-left: 0px;
display: block;
padding-bottom:
25px;
padding-top: 10px;
}
aside {
display: block;
float: left;
width: 220px;
padding-right:
0px;
padding-top: 0px;
padding-bottom:
0px;
padding-left:
10px;
margin-bottom:
20px;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
}
figure {
display: block;
padding: 10px;
margin: 0px;
float: left;
}
hgroup {
display: block;
padding-bottom:
25px;
margin-bottom:
25px;
}
ul li a:hover {
background-color:
#999;
}
li:hover ul {
display: block;
position:
absolute;
padding: 0px;
}
aside section a:hover {
background-color:
#eee;
}
footer a {
color: #FFF;
text-decoration:
none;
}
footer a:hover {
text-decoration:
underline;
}
.content {
display: block;
width: 650px;
float: left;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#eee;
}
banner {
background-color:
#666;
display: block;
font-weight: bold;
color: #FFF;
padding-top: 4px;
padding-right:
0px;
padding-bottom:
4px;
padding-left: 0px;
border-right-width:
1px;
border-left-width:
1px;
border-right-style:
solid;
border-left-style:
solid;
border-right-color:
#000;
border-left-color:
#000;
}
aside section a {
display: block;
padding: 10px;
color: #000;
text-decoration:
none;
border-bottom-width:
1px;
border-bottom-style:
solid;
border-bottom-color:
#eee;
}
footer {
display: block;
clear: both;
background-color:
#666;
padding-top: 20px;
padding-bottom:
20px;
padding-right:
0px;
padding-left: 0px;
text-align:
center;
}
li:hover li {
font-size: 12px;
float: none;
}
li:hover a {
background-color:
#999;
}
li:hover li a:hover {
background-color:
#b6b6b6;
}
body,td,th {
font-family:
Calibri;
}
body {
background-image:
url(media/bg.jpg);
background-repeat:
repeat-x;
}
</style>
Setelah itu, simpan dalam format HTML.
Website Statis - Membuat Website Statis.
Posted by Dreamweaver Tutorial on Saturday, 20 February 2016
CRUD (Create, Read,
Update, and Delete) adalah aplikasi web yang digunakan untuk memasukan data
(Create) yang akan ditampilkan pada web (Read) yang dapat di – edit (Update)
dan dihapus (Delete). untuk tutorial ini, saya tidak menjelaskannya di artikel ini, tapi saya akan membagikan dokumen untuk membaca tutorial ini.
Oh, iya. Sebelum membuat web dinamisnya, anda harus mempersiapkan Site nya. Dibawah ini.
Persiapan untuk membuat Website (Manage Site)
Document Link :
Website Dinamis – Membuat Aplikasi CRUD Pada Web
Ilham Saputra
February 13, 2016
New Google SEO
Bandung, Indonesia
Website Dinamis – Membuat Aplikasi CRUD Pada Web
Posted by Dreamweaver Tutorial on Saturday, 13 February 2016
Sebelum membuat website, kita harus mengenal terlebih dahulu
website yang akan kita buat. Berdasarkan isinya, website tergolong menjadi 2
bagian. Yaitu website statis dan website dinamis.
- Website Statis, yaitu website yang isinya bersifat statis. Webstie ini sangat cocok untuk perorangan dan perusahaan berskala kecil yang ingin memberikan informasi singkat mengenai keberadaan perusahaan, produk atau jasa yang diberikan. Kelemahan website jenis ini adalah isi situs web yang sifatnya statis dan apabila terjadi perubahan isi atau penambahan halaman situs, pemilik harus melakukan perubahan isi atau menambah halaman situs web secara manual.
- Website Dinamis, yaitu situs web yang isi dan tampilannya disimpan dalam suatu database sehingga untuk melakukan perubahan atau penambahan halaman situs, pemilik hanya perlu melakukan perubahan atau penambahan data melalui interface berbasis website yang telah disediakan.
- Website Company Profile
- Website Mesin Pencari
- Website Portal
- Websie Blog
- Website Networking
- Website Forum
- Website Berita
- Website galeri
- Website e-Commerce
- Website e-Learning
XAMPP adalah perangkat lunak ( free software)
bebas, yang mendukung untuk banyak sistem operasi, yang merupakan
kompilasi dari beberapa program.
Fungsi XAMPP sendiri adalah sebagai server yang berdiri
sendiri (localhost), yang terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa
pemrograman PHP dan Perl. Nama XAMPP sendiri merupakan singkatan dari X
(empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.
Server HTTP Apache
atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak
sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware
serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web.
Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.
MySQL adalah sebuah
perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database
management system) atau DBMS yang multithread, multi-user, dengan sekitar 6
juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai
perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi
mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana
penggunaannya tidak cocok dengan penggunaan GPL.
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data (database), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu per satu.
Untuk mendownload XAMPP, anda dapat mengunjungi situs resminya XAMPP dibawah ini
https://www.apachefriends.org/index.html
Pengertian web dinamis adalah suatu web yang kontent atau isinya dapat berubah–ubah setiap saat. Sebab dalam teknologi pembuatan web dinamis sudah dirancang semudah mungkin bagi pemakai atau user yang menggunakan web tersebut.
Atau definisi web dinamis yang lengkap yaitu web yang isinya dapat dirubah sewaktu-waktu dengan sangat mudah tanpa harus melakukan perubahan pada kode-kode atau coding. Kontent yang terdapat di web dinamis pun tersimpan disebuah database, sehingga bagi orang-orang yang tidak bsa akan coding-pun dapat merubah isi kontent tersebut tanpa harus menguasai bahasa pemrograman web yang biasa disebut dengan coding.
Cara Kerja Web Dinamis
Ciri-ciri web dinamis:
- Menggunakan bahasa pemrograman web misalnya seperti PHP, HTML dan yang lainnya.
- Memiliki database.
- Konten di dalamnya bisa berasal dari pengunjung dan bisa juga dari database.
- Lebih sering di-update.
Kelebihan Web Dinamis yaitu:
- Konten dan layout dapat berubah-ubah atau diubah-ubah.
- Memakai dynamic html (DHTML).
- Memakai pemrograman server untuk mengatur perubahan data.
- Dapat menggunakan CMS untuk mengubah konten atau isi website.
- Konten web dan layout halaman dibuat secara terpisah, sehingga loading pada halaman lebih cepat.
- Dapat memakai database untuk menyimpan konten atau isi.
- Bisa mepasilitasi komunikasi 2 arah antara admin dan juga visitor (pengunjung web).
- Konten yang terbaru selalu berada di urutan paling ataus atau pertama karena untuk memperjelas konten yang diupdate.
Kekurangan Website Dinamis yaitu:
- Sangat kompleks, sehingga sulit dalam pencarian Search Engine.
Hosting (disebut juga Web Hosting / sewa hosting) adalah penyewaan tempat untuk menampung data-data yang
diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. Data
disini dapat berupa file, gambar, email, aplikasi/program/script dan database.
Berdasarkan pembayaran, Hosting dibagi menjadi dua, yaitu
Hosting Premium dan hosting Gratis
Hosting Premium adalah hosting yang disewakan untuk atau
bisnis berskala sedang atau besar. Web hosting ini biasanya memiliki beberapa
paket hosting dengan tarif yang berbeda.
Hosting Gratis adalah hosting yang disewakan untuk atau
bisnis berskala kecil. Selain itu, web hosting ini dapat diunakan untuk
perorangan baik pemula atau kelas menengah. Web hosting ini biasanya dapat disewa
secara gratis.
Berdasarkan biaya, web hosting dibedakan menjadi 3 bagian,
yaitu :
Shared Hosting
Shared hosting merupakan hanya sebuah konsep hosting yang lebih dari satu situs pada satu
server tertentu. Shared hosting juga dikenal sebagai virtual hosting yang pada
umumnya hampir kebanyakan dari semua situs di internet dijalankan dengan shared
hosting karena sumber daya server nya dapat dibagi-bagi di antara berbagai
klien host nya.
Dedicated Hosting
Dedicated Hosting adalah menyewa penggunaan seluruh server tanpa harus berbagai dengan
yang lain.
Server Co-Location
Server Co-Location adalah sewa keamanan fisik, tenaga listrik secara terus menerus dan
koneksi internet yang cepat dan handal untuk server.
Ilham Saputra
January 29, 2016
New Google SEO
Bandung, Indonesia
Video atau media lainnya
digunakan pada sebuah website untuk memudahkan pengunjung web atau blog dalam
mencari informasi. Selain itu, media digunakan untuk memperindah tampilan web
atau blog. Pada media seperti foto sangat mudah diletakkan pada web, tapi pada
media seperti video, harus menggunakan kode iframe untuk meletakannya. Caranya
:
1. Silahkan
Copy kan kode dibawah ini pada code.
<iframe width=’480’
height=’240’ src=’direktori tempat video kamu disimpan.mp4’ frameborder=’1’
allowfullscreen></iframe>
Untuk src, anda dapat mencari
direktori tempat video anda disimpan dalam format mp4. Dan jika anda ingin
memasukan video dari youtube, anda tinggal meng-copy link video youtube anda.
2. Simpan
dalam format HTML, lalu anda dapat menekan tombol F12 untuk menguji coba
videonya. Dan hasilnya akan terlihat seperti gambar dibawah.
