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.
