Cara membuat website berita dengan php dan mysql

Question

Web dinamis bisa saya sebutkan sebagai jenis web yang kaya akan informasi, karena setiap halaman informasi yang dibangun dapat ditambahkan dihapus dan diubah setiap saat tanpa perlu mengubah struktur kode di dalam web itu sendiri. Berbeda dengan web statis yang sangat terbatas dalam pemanfaatannya.

Bagaimana Membuat Web Dinamis?
Studi Kasus : Membuat Website Berita Sederhana
Persiapan
Membuat Perancangan Sistem
Membuat Struktur Tabel
Relasi Antar Tabel
Implementasi Dalam Program
Bagian BackEnd
Bagian FrontEnd
Download Source Code
Cara Instalasi Website Dinamis PHP dan MySQL
Rekomendasi Aplikasi

Bagaimana Membuat Web Dinamis?

Web dinamis dibangun menggunakan bahasa pemrograman yang mendukung pengembangan web seperti PHP, Javascript, Java dan python. Sedangkan untuk struktur halaman tetap menggunakan bahasa markah HTML dan CSS.

Secara umum web dinamis memiliki fitur penyimpanan data yang kita sebut database, fungsinya untuk menyimpan semua data atau informasi dalam website itu sendiri. Terdapat banyak jenis database yang biasanya digunakan seperti postgreSQL, Oracle, dan MySQL.

Saat ini khusus di indonesia saya melihat masih banyak yang menggunakan bahasa pemrograman PHP dengan framework yang berkembang yang cukup memudahkan para developer untuk mengembangkan web dari skala kecil hingga besar.

Studi Kasus : Membuat Website Berita Sederhana

Cara membuat website berita dengan php dan mysql

Pada artikel kali ini mengenai cara membuat web dinamis dengan studi kasus untuk membuat website berita sederhana berbasis PHP native dengan basis data MySQL dan menggunakan CSS Bootstrap.

Persiapan

1. Instalasi web server (Xampp)

Xampp merupakan web server yang memungkinkan kita menjalankan website dari localhost. Website bisa kita kelolah dari komputer kita secara offline sebelum web nantinya diunggah ke hosting sehingga dapat diakses oleh pengguna di internet. selain itu di dalam paket aplikasi xampp telah tersedia database MySQL yang bisa kita manfaatkan untuk pengelolaan manajemen basis data di aplikasi web yang dibuat. Untuk panduan instalasi baca pada artikel cara instal xampp

2. Teks Editor (Visual Studio Code)

Teks editor merupakan aplikasi yang digunakan untuk menulis setiap baris sintak program. Ada banyak teks editor yang bisa digunakan namun yang saya rekomendasikan adalah visual studio code, selain itu ada juga notepad++ atau sublime text. Kalian bisa mendownload ketiga softaware tersebut langsung dari website resmi masing-masing. Untuk visual studio code bisa di download disini

Membuat Perancangan Sistem

Perancangan sistem adalah cara kita menggambarkan suatu sistem yang akan kita buat melalui simbol-simbol tertentu memberikan arti/makna. Pada level yang paling rendah kita membuat dengan menggunakan diagram konteks.

Diagram konteks adalah gambaran sistem yang dirancang secara garis besar yang terdiri dari sebuah proses dan beberapa entitas yang berinteraksi di dalamnya.

Terdapat dua entitas yakni pengunjung dan admin, Pengunjung dapat melihat dan memberikan komentar pada setiap artikel berita yang di publish di dalam website. Sedang Admin dapat menginput data artikel (termasuk kategori), verifikasi komentar dan menginput data admin lainnya, jadi dalam hal ini website bisa memiliki lebih dari satu admin yang akan mengelola data di dalam sistem. Admin akan menerima laporan daftar artikel, komentar yang masuk serta daftar admin yang ada di dalam sistem.

Diagram konteks dapat di jabarkan lebih lanjut pada level-level berikutnya untuk menggambarkan sistem secara lebih rinci.

Membuat Struktur Tabel

Rancangan struktur tabel digunakan untuk memberikan informasi secara detail dari setiap kolom (field) yang terdapat dalam masing-masing tabel. Informasi terkait tipe data yang digunakan serta penggunaan atribut lainnya pada setiap field.

1. Tabel Artikel

Tabel artikel berfungsi untuk menyimpan data artikel. Terdapat 8 kolom (field) yaitu id_artikel, kode_artikel, judul_artikel dan beberapa lainnya.

Setiap kolom (field) menggunakan tipe data yang berbeda-beda sesuai dengan karakteristik nilai yang akan di tampung baik untuk tipe numerik seperti integer maupun tipe string (char, varchar, text) atau pun tipe date untuk tanggal.

Kunci utama atau primary key yang digunakan pada tabel ini adalah id_artikel dengan menggunakan auto_increment. fungsi ini adalah fungsi yang ada di database yang memungkinkan untuk membuat angka unik secara otomatis dan terurut setiap kali ada records baru yang di masukan ke dalam tabel tersebut.

No	Kolom	Tipe	Keterangan
1	id_artikel	Int(11)	Primary Key, Auto_increment
2	kode_artikel	char(11)	Not Null, Unik
3	judul_artikel	varchar(100)	Not Null
4	isi_artikel	text	Not Null
5	gambar	varchar(100)	–
6	tanggal	date	–
7	status	int(11)	Not Null
8	id_kategori	int(11)	Not Null

2. Tabel Kategori

Tabel kategori berfungsi untuk menyimpan data kategori yang terdiri dari 3 kolom yaitu id_kategori sebagai kunci utama bertipe integer, nama kategori dan gambar_kategori bertipe varchar.

No	Kolom	Tipe	Keterangan
1	id_kategori	int(11)	Primary Key, Auto_increment
2	nama_kategori	varchar(50)	Not Null
3	gambar_kategori	varchar(100)	–

3. Tabel Komentar

Tabel komentar berfungsi untuk menyimpan data komentar dengan memiliki 6 field (kolom) seperti pada tabel di bawah ini:

No	Kolom	Tipe	Keterangan
1	id_komentar	int(11)	Primary Key, Auto_increment
2	id_artikel	int(11)	Not Null
3	nama	varchar(50)	–
4	email	varchar(50)	–
5	isi_komentar	text	–
6	status_komentar	int(11)	Not Null

4. Tabel Pengguna

Tabel pengguna berfungsi untuk menyimpan data pengguna aplikasi dalam hal ini adalah administrator fungsi lainnya adalah sebagai validasi login ke aplikasi, jadi hanya admin yang memiliki data yang tersimpan di tabel pengguna lah yang bisa masuk ke aplikasi.

No	Kolom	Tipe	Keterangan
1	id_pengguna	int(11)	Primary Key, Auto_increment
2	kode_pengguna	char(9)	Not Null, unik
3	nama_pengguna	varchar(50)	–
4	email	varchar(35)	–
5	no_telp	char(14)	–
6	username	varchar(50)	Not Null
7	password	varchar(100)	Not Null
8	status	int(11)	Not Null

Relasi Antar Tabel

Relasi antar tabel memberikan informasi mengenai hubungan dari setiap tabel yang saling berkaitan satu dengan yang lain dalam database.

Pada gambar di atas menggambarkan hubungan dari masing-masing tabel yang salin berkaitan dan berketergantungan antara satu dengan yang lain masing-masing tabel memiliki kunci utama (primary key) dan akan menjadi kunci tamu (foreign key) pada table yang direlasikan.

Misalnya pada tabel artikel di relasikan dengan tabel kategori field yang direlasikan adalah id_kategori di mana field id_kategori di dalam tabel kategori sebagai kunci utama dan menjadi kunci tamu di tabel artikel, begitu juga pada tabel komentar dan pengguna kunci utama setiap tabel menjadi kunci tamu di tabel artikel.

Tabel profil tidak memiliki relasi atau hubungan dengan tabel lainnya karena hanya berfungsi untuk menyimpan informasi website saja.

Implementasi Dalam Program

Pada tahap ini saya sedikit menjukan beberapa contoh bagian program pada website dinamis menggunakan PHP dan MySQL.

Bagian BackEnd

Halaman login digunakan untuk admin masuk ke dashboard aplikasi. Didalam dashboard admin dapat melakukan beberapa hal penting di dalam website seperti sistem CRUD (create, read, update, delete) pada masing-masing data yang dibutuhkan.


  Halaman Login
    
        
     
            
                
                    
                        Username:
                        
                    
                    
                        Password:

Di halaman login admin harus memasukan username dan password untuk bisa masuk ke halaman administrator. Sistem akan melakukan validasi dengan cara mengecek informasi pengguna di database, apabila username dan password sesuai maka pengguna akan di alihkan ke halaman admin.

Halaman Kategori

Halaman kategori merupakan halaman khusus untuk admin menambah jenis kategori artikel di dalam website.

Berikut ini adalah tampilan halaman kategori, dengan menampilkan gambar icon yang merepresentasikan kategori.

Halaman Artikel

Halaman artikel berupa gambar, judul, kategori, tanggal di terbitkan serta status apakah artikel tersebut di publish atau tidak. Admin dapat melakukan operasi CRUD pada setiap artikel yang diterbitkan.

        
            
                
                    No
                    Gambar
                    Judul
                    Kategori
                    Tanggal
                    Status
                    Aksi
                
            
            
            
            
                
                
                
                
                
                Publish" : "Konsep"; ?>

Berikut ini contoh untuk form tambah artikel



    
    
        
            
                Kode:
                
                
            
        
    
    
    
        
            
                Judul Artikel:
                
            
        
    
       
    
    
        
            Isi Artikel:
            
        
    
    
    
    
        
            
                
                Gambar:
                
                    
                        
                        
                                
                        
                    
                
            
        
        
            
                Kategori:

Halaman Pengguna (Admin)

Halaman pengguna adalah adalah halaman untuk admin dapat menambahkan admin yang lain. Sehingga pengelolaan data tidak hanya satu orang saja tapi bisa dari beberapa orang.

Bagian FrontEnd

Halaman Home

Halaman home merupakan halaman awal saat pengguna mengakses website. Halaman ini menyajikan daftar artikel terbaru yang di publish oleh admin.


0){
        while ($data = mysqli_fetch_array($hasil)):
    ?>
        
            
                
                
                    
                    
                    
                    
                    Selengkapnya
                
            
        
         Tidak ada artikel pada kategori ini.";
    };
     ?>

Berikut ini tampilan halaman home:

Bagian Artikel

Ketika salah satu thumbnail artikel di halaman home di klik maka pengunjung akan di arahkan ke halaman artikel. Halaman artikel berisi informasi lengkap mengenai artikel yang di publish di dalam website.



    
        
            
                
                    Home
                    
                    
                
            
            
            
                
                
            
            Komentar telah terkirim, menunggu persetujuan dari admin";
                    }else {
                        echo"Komentar gagal";
                    }   
                }
            ?>
            
                
                    Tinggalkan Komentar
                    
                        
                        
                    
                    
                        Nama:
                        
                    
                    
                        Email:
                        
                    

                    
                        Komentar:

Berikut ini contoh halaman artikel:

Download Source Code

Pada bagian implementasi yang saya tulis di atas hanyalah sebagian program saja, karena cukup banyak file maka tidak memungkinkan untuk di bahas secara teknis satu persatu di artikel ini. Oleh sebab itu kalian bisa mendownload source code yang saya bagikan di bawah ini secara gratis

[sociallocker id=”5349″] [/sociallocker]

Cara Instalasi Website Dinamis PHP dan MySQL

Download dan install Xampp sebagai web server agar website dapat dijalankan melalui localhost
Siapkan aplikasi teks editor saya menyarankan gunakan Visual studio code
Klik tombol download source code disitu kalian akan mendapatkan semua source code dan file-file pendukung seperti jQuery dan bootstrap serta database-nya.
Salin hasil download ke dalam direktori localshot di C:/xampp/htdocs/
Jalankan aplikasi Xampp aktifkan apache dan MySQL
Buka aplikasi phpMyAdmin yang dapat di akses melalui xampp, klik tombol admin pada module MySQL
Buat database baru dengan nama web_personal kemudian lakukan import menggunakan file web_personal.sql yang terdapat di dalam folder database.
jalankan aplikasi melalui localhost di alamat http://localhost/web_dinamis/
Selesai

Untuk masuk ke halaman admin gunakan contoh pengguna berikut:

Username : dimas
Password : 12345

Rekomendasi Aplikasi

kode php Program Portal Berita