Pada postingan kali ini saya akan membahas mengenai pembuatan CMS blog. Yaa sebelumnya saya posting tentang “Membuat Blog dengan PHP” tapi tidak begitu jelas yah hehe, sekarang mau coba posting mengenai pembuatan CMS blog yang lebih lengkap nya, supaya lebih jelas.. :)

Kerangka Postingan

Membuat Blog Part-1
Pembahasan Kali ini -> Membuat halaman awal Blog
Membuat halaman detail Blog
Membuat Database & Table
Membuat Blog Part-2
Pembahasan => Membuat Halaman admin
Membuat Fitur Posting – add, edit dan delete
Membuat Blog Part-3
Pembahasan => Membuat Fitur Kategori – add, edit dan delete

Pertama kita siapkan dulu file untuk halaman front end nya, dimana file ini berfungsi untuk menampilkan halaman postingan kita. Didalam halaman ini terdiri dari

  • Header
  • Navigasi
  • Bagian artikel yang terletak disebelah kiri
  • Bagian sidebar yang akan menampilkan postingan terbaru, terletak disebelah kanan

Pada bagian halaman artikel terdapat 2 tampilan, yaitu halaman home awal yang befungsi untuk melihat kilasan artikel sebelum user melihat artikel secara detail dan halaman detail artikel dimana user akan melihat detail artikel ketika user meng klik artikel lalu setelah itu kita tampilkan artikel secara penuh.

Membuat Halaman depan Blog

Baiklah langsung saja kita membuat halaman awal blog kita. Pada pembuatan blog yang akan kita buat ini dapat langsung liat di screenshot nya dibawah ini.

halaman_depan_blog

Dan halaman detail artikelnya sebagai berikut

halaaman_detail_blog

Berikut source code HTML nya

index.html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="header">
				<h1>Hitamcoklat | Blog</h1>
			</div>
			<div id="navigasi">
				<ul>
					<li><a href="#">Menu Satu</a></li>
					<li><a href="#">Menu Dua</a></li>
					<li><a href="#">Menu Tiga</a></li>
					<li><a href="#">Menu Empat</a></li>
				</ul>
			</div>
			<div id="konten">
				<div id="kiri">
					<div class="artikel">
						<h2>Postingan Satu</h2>
						<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLoremLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLoremLorem Lorem ipsum dolor sit amet...<a href="#">Baca Selengkapnya</a></p>
					</div>

					<div class="artikel">
						<h2>Postingan Satu</h2>
						<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLoremLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLoremLorem Lorem ipsum dolor sit amet...<a href="#">Baca Selengkapnya</a></p>
					</div>

					<div class="artikel">
						<h2>Postingan Satu</h2>
						<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLoremLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLoremLorem Lorem ipsum dolor sit amet...<a href="#">Baca Selengkapnya</a></p>
					</div>

				</div>
				<div id="kanan">
					<h2>Recent Post</h2>
					<ul>
						<li><a href="#">Artikel Satu</a></li>
						<li><a href="#">Artikel Dua</a></li>
						<li><a href="#">Artikel Tiga</a></li>
						<li><a href="#">Artikel Empat</a></li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
			<div id="footer">
				<p>Hitamcoklat | Blog</p>
			</div>
		</div>
	</body>
</html>

style.css

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #fff;
	font-family: Arial;
	font-size: 0.850em;
}

.artikel p {
	margin-top: 10px;
}

#wrap {
	padding: 10px;
	background-color: #EAEAEA;
	width: 800px;
	margin: 20px auto;
}

#header, #navigasi, #konten {
	width: 100%;
	float: left;
}

#header {
	height: 70px;
}

#navigasi {
	background-color: #CCC;
}

#navigasi ul li {
	margin: 10px;
	font-weight: bold;
	list-style: none;
	float: left;
}

#navigasi ul li a, #kanan ul li a {
	text-decoration: none;
	color: #000;
}

#navigasi ul li a:hover, #kanan ul li a:hover {
	text-decoration: underline;
}

#kanan ul li {
	list-style: none;
	font-weight: bold;
	border-left: 3px solid #CCC;
	margin-top: 5px;
	padding-left: 5px;
	background-color: #fff;
}
.clear {
	clear: both;
}

.artikel {
	border: 1px solid #CCC;
	margin-top: 10px;
	padding: 10px;
	background-color: #fff;
}

#kiri {
	padding: 10px;
	float: left;
	width: 65%;
}

#kanan {
	padding: 10px;
	float: left;
	width: 30%;
}

#footer {
	background-color: #CCCCCC;
	width: 100%;
	height: 50px;
}

#footer p {
	margin: 10px;
	float: left;
}

Baiklah jika semuanya sudah selesai maka tampilannya akan sama dengan screenshot diatas :), kita lanjut membuat database yaa biar cepet hehe

Membuat database

Selanjutnya kita akan membuat database. Seperti biasa pertama buat dulu database di phpmyadmin dengan nama bebas terserah anda hehe. Setelah itu kita akan membuat table – table dalam database, untuk lebih jelasnya dapat dilihat pada gambar berikut ini

database

*Keterangan

Table Category

Nama Field Tipe
id int(11)
category varchar(100)

Table Artikel

Nama Field Tipe
id int(11)
id_kategori varchar(100)
judul varchar(250)
konten text
tanggal

Table User

Nama Field Tipe
id_user int(5)
username varchar(10)
password varchar(35)
level enum(‘user’,'admin’)
DEFAULT ‘user’

Oke untuk part pertama cukup sampai disini, besok dilanjut yah :)Salam Blogger!

Download File ⤧  Next post Debugging Aplikasi Hybrid Menggunakan GapDebug ⤧  Previous post Mengecek Username Ajax – Simple