berita online
TRANSCRIPT
Tutorial Berita Online | Web Programming
Support by : AMES System
STUDY KASUS : BERITA ONLINEUntuk pembuatan berita online berbasis web, yang perlu kita perhatikan adalah pengolahan data dari berita itu sendiri. Oleh karena itu, sebaiknya kita rancang terlebih dahulu untuk racangan databasenya : APLIKASI BERITA ONLINE Nama Database Nama Table 1. tbberita no judul isi tanggal waktu 2. tbadmin no username password 3. tbbukutamu no nama email website komentar tanggal waktu Nama File Halaman User 1. menu.php 2. style.css 3. koneksi.php 4. home.php 5. index.php 6. berita.php 7. bukutamu.php 8. login.php Halaman Admin 1. index.php 2. bukutamu.php 3. berita.php 4. editberita.php 5. logout.php int(12) auto_increment primary key varchar(50) varchar(50) varchar(50) text varchar(25) varchar(25) : int(12) auto_increment primary key varchar(35) varchar(35) int(12) auto_increment primary key varchar(50) text varchar(25) varchar(25) : dbberitaonline :
Ganesis Alexander
Page 1
Tutorial Berita Online | Web ProgrammingNama Folder 1. Design Interface : beritaonline
Support by : AMES System
Untuk pembuatan design, silahkan anda gunakan software designer seperti Photoshop maupun Corer. Untuk Ukuran Width = 900px, dan Height = 150px. Simpan dengan nama header.jpg
2. Codding Interface Halaman User
A. Pembuatan Menu dengan fasilitas CSS Langkah pertama silahkan anda buat file baru, simpan dengan nama menu.php Masukkan kode link untuk pemanggilan file style.css. Masukkan kode berikut : style.css Untitled Document
- Home
Berita Buku Tamu
Login
Ganesis Alexander
Page 2
Tutorial Berita Online | Web Programming
Support by : AMES System
Setelah file menu.php selesai, silahkan anda buat file baru dengan memilih type css. Simpan dengan nama style.css. Silahkan anda ketik kode css untuk menu yang akan kita buat stylenya. /* CSS Document */ #menu { background-color:#00CCFF; width: 200px; } #menu ul { list-style-type:none; margin: 2px; padding: 2px; } #menu li { margin: 2px; padding: 2px; } #menu a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color:#FFFFFF; text-decoration:none; background-color:#0000FF; display:block; padding:2px; } #menu a:hover { color:#FFFFOO; background-color:#FF0000; } B. Pembuatan Index Untuk pembuatan index silahkan anda buat file baru, dan simpan dengan nama index.php Langkah-langkah pembuatan index.php
Dari menu instert > Table Setting table anda sebagai berikut :
Ganesis Alexander
Page 3
Tutorial Berita Online | Web Programming
Support by : AMES System
Kemudian klik OK. Atur lah bagian Align> pilih Center.
Masukkan gambar header yang telah anda buat dengan cara letakkan kursor anda pada bagian header, kemudian dari menu Insert > Images, kemudian cari gambar yang telah anda buat, lalu Ok. Silahkan anda design seperti gambar berikut :
Ganesis Alexander
Page 4
Tutorial Berita Online | Web Programming1. Menambahkan file menu kedalam index.
Support by : AMES System
Kemudian tambahkan table menu yang terletak di kolom pertama baris kedua. Letakkan kursor anda di baris kedua kolom pertama, pilih Horz = Center, Vert = Top. Aturlah table anda dengan settingan seperti berikut :
Kemudian klik OK. Maka hasilnya designnya, seperti gambar berikut :
Letakkan kursor anda pada table yang barusan anda buat, kemudian buka code anda, lalu ketikkan kode berikut untuk memanggil file menu yang telah kita buat. Masukkan kode berikut ini :
Ganesis Alexander
Page 5
Tutorial Berita Online | Web ProgrammingMaka akan muncul symbol php pada table anda.
Support by : AMES System
Silahkan anda jalankan file index.php anda pada web browser anda.
2. Menambahkan file content kedalam index. Silahkan anda klik pada baris kedua kolom kedua, buka code anda, dan ketikkan perintah berikut :
Ganesis Alexander
Page 6
Tutorial Berita Online | Web ProgrammingC. Pembuatan File Koneksi
Support by : AMES System
Fiel koneksi ini digunakan untuk menghubungkan ke dalam database, silahkan tambahkan file baru, dan simpan dengan koneksi.php. Untuk kode nya silahkan anda ketik perintah berikut ini : D. Pembuatan file home Untuk file home digunakan untuk menampilkan informasi yang pertama kali muncul. Silahkan tambahkan file baru, kemudian disimpan dengan nama home.php Masukkan kode home kalian didalam sintak home.php BERITA OLAHRAGA SELAMAT DATANG Selamat datang di website berita online, semua informasi tentang olahraga akan kami hadirkan di situs ini.. Silahkan anda jalankan diweb browser anda, dana hasilnya :
Ganesis Alexander
Page 7
Tutorial Berita Online | Web ProgrammingE. Pembuatan file berita
Support by : AMES System
File berita digunakan untuk menampilkan berita yang diiput oleh admin, berhubung kita belum membuat file administrator, maka untuk data berita, silahkan anda input dari database (localhost/phpmyadmin). Setelah selesai, tambahkan file baru dan simpan dengan berita.php, masukkan sebuah table dengan ketentuan sbb :
Silahkan anda buka code, kemudian anda masukkan perintah berikut ini yang berwarna merah :
Ganesis Alexander
Page 8
Tutorial Berita Online | Web Programmingberita.php
Support by : AMES System
|
Lihat hasilnya.
Ganesis Alexander
Page 9
Tutorial Berita Online | Web ProgrammingF. Pembuatan file bukutamu
Support by : AMES System
Buku tamu digunakan para pengunjung untuk meninggalkan pesan atau komentar tentang website tersebut. Untuk pembuatannya silahkan anda buat file baru, simpan dengan nama bukutamu.php
bukutamu.php Untitled Document Untitled Document
Ganesis Alexander
Page 12
Tutorial Berita Online | Web Programming
Support by : AMES System
Support by : AMES System
HALAMAN ADMINISTRATOR Menu Admin - Logout - Buku Tamu - Berita
Lihat hasilnya :
Ganesis Alexander
Page 15
Tutorial Berita Online | Web Programming
Support by : AMES System
B. File logout File logout digunakan untuk keluar dari halaman administrator, buatlah file baru dan simpan dengan logout.php (didalam folder admin), silahkan ketik kode berikut ini pada view code : logout.php BUKU TAMU Untitled Document
INPUT BERITA Judul
Ganesis Alexander
Page 19
Tutorial Berita Online | Web Programming
Support by : AMES System
Isi
Untitled Document