Cara menggunakan apa itu html statis?

Question

Bagi teman-teman yang ingin memulai untuk belajar web programming kalian perlu simak pembahasan kali ini mengenai contoh web statis dan dinamis karena materi ini cukup penting untuk kalian pelajari jika kalian benar-benar pemula dalam web programming.

Table of Contents Show

Contoh Sederhana Web Statis
Contoh Sederhana Web Dinamis
Konfigurasi Database
Apa itu web statis dan contohnya?
Apa saja contoh website statis?
Website statis apa?
Bagaimana halaman pada web statis?

Website bisa di kategorikan menjadi dua yaitu yang bersifat statis dan dinamis, apa saja perbedaan dari keduanya? saya sudah pernah membahas 10 perbedaan website statis dan dinamis kalian bisa baca dulu sebelum kita bahas materi kita hari ini.

Ada beberapa parameter yang bisa kita gunakan untuk menentukan apakah suatu website itu bersifat statis atau dinamis, contohnya adalah bahasa pemrograman, apakah web tersebut menggunakan bahasa pemrograman yang mampu melakukan pemrosesan data yang akan berjalan di sisi server atau hanya menggunakan HTML dan CSS saja!

Jika suatu website hanya menggunakan html dan css saja bisa dikatakan bahwa web tersebut bersifat statis karena konten web tidak dapat diubah kalaupun ingin diubah harus mengedit langsung pada sintaknya, sedangkan jika menggunakan bahasa pemrograman seperti PHP, javascript (node.js) dan python konten di dalam website bisa berubah-ubah tanpa perlu mengubah script.

Contoh Sederhana Web Statis

Untuk memahami apa itu web statis kita bisa memakai contoh salah satu komponen web yaitu menggunakan tabel.

Buatlah sebuah file dengan nama index.html melalui teks editor dengan kode seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel HTML dengan CSS</title>
</head>
    <body>
        <table border="1" width="50%">
            <tr> <th>No</th><th>NIK</th> <th>Nama</th><th>Jurusan</th></tr>
            <tr> <td>1</td><td>125456780</td> <td>Setiawan Dimas</td> <td>Teknik Informatika</td></tr>
            <tr> <td>2</td><td>135410264</td> <td>Erika Sanjaya</td>  <td>Sistem Informasi</td></tr>
            <tr> <td>3</td><td>115789794</td> <td>Budi Prasetyo</td>  <td>Komputerisasi Akuntansi</td></tr>
            <tr> <td>4</td><td>125534844</td> <td>Yunita Kristiani</td> <td>Teknik Komputer</td></tr>
            <tr> <td>5</td><td>135497393</td> <td>Andi Kurniawan</td>  <td>Manajemen Informatika</td></tr>
        </table>              
    </body>
</html>

Perhatikan kode HTML di atas setiap baris data pada tabel di buat secara langsung (manual) di dalam kode-nya, sehingga jika kita ingin menambah atau menghapus maka perlu dilakukan secara langsung pada bagian tersebut.

Cara ini terbilang cukup mudah tetapi tidak efisien, bila kita ingin membuat web porfolio atau web company profile mungkin web statis dengan HTML bisa menjadi pilihan.

Tetapi jika teman-teman ingin mengembangkan web yang interaktif dengan skala yang lebih besar maka web dinamis adalah pilihannya.

Jika teman-teman perhatikan file web statis biasanya menggunakan extensi [dot]html yang dapat langsung dibuka di aplikasi browser, tanpa memerlukan web server!

Contoh Sederhana Web Dinamis

Contoh yang kedua tentang web dinamis kalian perlu menginstal web server agar web bisa dijalankan melalui localhost

Tutorialnya sudah saya tulis di artikel berikut:

Cara instal xampp
Menjalankan file PHP dengan xampp

Salah satu ciri web dinamis adalah informasi yang disajikan dapat berubah-ubah tanpa harus mengubah struktur kode. Informasi tersebut dapat kita simpan di database yang selanjutnya dapat di tampilkan di halaman website kita, ketika data/informasi di dalam database berubah (tambah, update atau hapus) maka konten di dalam website pun akan menyesuaikan.

Konfigurasi Database

Membuat database akademik

create database akademik

Buat tabel mahasiswa

create table mahasiswa (
    nim char(9) PRIMARY KEY,
    nama varchar(50),
    jurusan varchar(20)
);

Masukan beberapa contoh data ke dalam tabel mahasiswa

insert into mahasiswa (nim,nama,jurusan)
VALUES ('135410154','Setiawan Dimas','Teknik Informatika'),
	('12567833','Juan','Sistem Informasi'),
	('14567839','Candra','Teknik Komputer');

Selanjutnya buat sebuah file baru dengan nama mahasiswa.php kemudian simpan di dalam folder xampp/htdocs

<!DOCTYPE html>
<html>
<head>
<title>Contoh Tabel HTML dengan CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
    <body>
        <table border="1" width="50%">
        <?php
            //Membuat koneksi database
            $kon = mysqli_connect("localhost","root","","akademik");
            if (!$kon){
                die("Koneksi gagal:".mysqli_connect_error());
            }
            //Menjalankan query untuk menampilkan data dari database
            $sql="select * from mahasiswa order by nim desc";
            //eksekusi query
            $hasil=mysqli_query($kon,$sql);
            $no=0;
            //Menampilkan data dengan menggunakan perulangan while
            while ($data = mysqli_fetch_array($hasil)) {
                $no++;  
        ?> <tr>
                <td><?php echo $no; ?></td>
                <td><?php echo $data['nim']; ?></td>
                <td><?php echo $data['nama']; ?></td>
                <td><?php echo $data['jurusan']; ?></td>
            </tr>
        <?php 
            }
        ?>
        </table>              
    </body>
</html>

Untuk web dinamis kita menggunakan script PHP yang kita sisipkan di dalam elemen tabel. Terlihat cukup rumit di bandingkan dengan web statis, namun dengan cara ini kita menjadikan halaman website menjadi dinamis artinya ketika ada perubahan data di database maka informasi yang ada di website tersebut pun ikut berubah.

Contoh

Saya menambah 1 data baru di dalam tabel mahasiswa di database

insert into mahasiswa (nim,nama,jurusan)
VALUES ('12554783','Ayu Safitri','Manajemen Informatika');

Selanjutnya restart kembali browser, maka informasi data di dalam website akan bertambah.

Jika web file web statis bisa langsung di buka di aplikasi browser, maka untuk web dinamis tidak bisa dengan cara yang sama, kita perlu membuka lewat localhost pada web server yang sudah terinstall di komputer kita.

Pelajari materi-materi lain yang berhubungan dengan web statis dan dinamis

HTML
Bootstrap
PHP

Demikian artikel mengenai contoh sederhana antara web statis dan dinamis, semoga kalian sudah memahami dan mempunyai gambaran mengenai kedua contoh tersebut. Update selanjutnya saya akan berikan source code untuk keduanya, terimakasih.

Apa itu web statis dan contohnya?

Contoh dari web statis adalah web yang berisi profil perusahaan. Di sana hanya ada beberapa halaman dan kontennya hampir tidak pernah berubah karena konten langsung diletakan dalam file HTML.

Apa saja contoh website statis?

Contoh Web Statis.

Startupindonesia.my.id. Startupindonesia.my.id termasuk jenis website statis karena hanya memiliki konten yang berisikan informasikan saja. ... .

2. Gohugo.io. Contoh web statis selanjutnya adalah Gohugo.io karena untuk mengubah halamannya, data script kodenya perlu diubah terlebih dahulu, Sob..

Website statis apa?

Website statis adalah jenis website yang tidak dapat merubah konten secara sembarangan karena harus melalui script yang tersedia pada program.

Bagaimana halaman pada web statis?

Di halaman web statis, halaman akan tetap sama sampai seseorang mengubahnya secara manual. Dalam halaman web dinamis, konten halaman berbeda untuk pengunjung yang berbeda.

kode html