Disini Gw mau berbagi ilmu yg gw dapat selama menjalani seleksi di sekolah untuk mewakili SEKOLAH KU SMKN4 Banjarmasin.
GW ngepost 1 persatu aja Dari Layout, koneksi ke mysql sampa ke CRUD
Sebelum Lo coba ini pastiin broser lo sesuai dengan versinya, gw memakai versi firefox 18.0
Langsung aja ke layoutnya.
Pertama Folder xampp atau mysql simpan di htdocs buat folder baru....
Beri aja nama filenya
index.php ini adalah inti dari semuanya jadi lo jalanin ini duluan
isi dari index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"> <h1>Belajar Web Desain</h1>
</div><!--ini akhiran header-->
<div id="menu">
<marquee><h2>Belajar HTML dan PHP Bersama Faris SMKN 4 Banjarmasin</h2></marquee>
</div><!--ini akhiran menu-->
<div id="main">
<div id="kiri">
<ul>
<li><a href="index.php?menu=home">Home</a></li>
<li><a href="index.php?menu=html">HTML</a></li>
<li><a href="index.php?menu=css">CSS</a></li>
<li><a href="index.php?menu=jsp">Java Script</a></li>
<li><a href="index.php?menu=abm">About ME</a></li>
</ul>
</div><!--ini akhiran kiri-->
<div id="kanan">
<?php include("menu.php");?>
</div><!--ini akhiran kanan-->
</div><!--ini akhiran main-->
<div id="halat">
</div><!--ini akhiran halat-->
<div id="footer">
<h2>Copyright © created By Faris Abdillah</h2>
</div><!--ini akhiran footer-->
</div><!--ini akhiran wrapper-->
</body>
</html>
ini cssnya
save dlu gambar background sama headernya disini
buat dlu folder baru dengan nama gambar
Ini background lo kasih nama aja background.jpg
Ini header lo kasih nama aja header.jpg
simpan dengan style.css, sama seperti nama style diatas, gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
@charset "utf-8";
/* CSS Document */
body{
background-image:url(gambar/background.jpg);
}
h1{
margin:0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
font-size:66px;
}
#menu h1{
margin:0px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
}
h2{
margin:0;
text-align:center;
}
#wrapper{
border:#CC6600 solid 10px;
border-radius:10px;
width: 960px;
margin: 0 auto;
}
#header{
background:url(gambar/header.jpg);
height:150px;
}
#menu{
background:#FF9900;
padding:1px;
}
#main{
overflow:hidden;
background:#FFFFFF;
}
#kiri{
float: left;
min-height:400px;
width:200px;
}
#kanan{
border-left:1px solid #CCCCCC;
float:right;
min-height:400px;
width:750px;
}
#halat{
background:#CCCCCC;
height:40px;
}
#footer{
clear:both;
padding: 20px;
background:#FF3300
}#kiri ul{
margin:1px;
padding:0;
list-style:none;
}
#kiri ul li{
display:block;
margin:15px;
}
#kiri a{
display:block;
background:#ff9900;
text-decoration:none;
color:#CC0000;
padding: 3px 15px;
border:1px solid #006699;
border-radius:10px;
}
#kiri a:hover{
background-color:#ff8400;
}
menu.php
<?php
@$menu=$_GET['menu'];
if($menu=='home'){
include('home.php');
}elseif($menu=='html'){
include('html.php');
}elseif($menu=='css'){
include('css.php');
}elseif($menu=='jsp'){
include('jsp.php');
}elseif($menu=='abm'){
include('abm.php');
}
else{
include('home.php');
}
?>
Kalo Sampai Sini LINK Yg ada di INDEX nggak bkal Jalan karena file terpisah
buat aja nama filenya
home.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman Home</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam home.php</h2>
</body>
</html>
html.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman HTML</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam html.php</h2>
</body>
</html>
css.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman CSS</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam css.php</h2>
</body>
</html>
jsp.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman JavaScript</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam jsp.php</h2>
</body>
</html>
Dan Ini yg terakhir tpi terserah lo mau lu ikutin apa nggak...
klo ngga lo ikutin, lo harus hapus link about me diatas.. karna ngga bkal guna
abm.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Table</title>
</head>
<body>
<font>
<table border = '0' align = "center">
<tr>
<td rowspan = "2" width='570' height = '550' valign = 'top' align = "justify">
<h2>Faris's Profile</h2>
<pre>
Nama : <b>Faris</b><br>
NIM : 3132<br>
Jurusan : Rekayasa Perangkat Lunak<br>
Tempat Tanggal Lahir : Banjarmasin, 07 september 1996<br>
Alamat : Jl. Kayutangi Ujung Komp. Berkah RT. 42<br>
Kecamatan Alalak Utara<br>
Kotamadya Banjarmasin<br>
</pre>
Riwayat Pendidikan :<ol type ="A">
<li>MI Al-hamid Banjarmasin 2005-2008)</li>
<li>MTs Negeri Mulawarman Banjarmasin (2008-2011)</li>
<li>SMK Negeri 4 Banjarmasin (2011-Sekarang)</li>
</ol>
<pre>
Email : farisrpl2@gmail.com<br>
Homepage : <b>farisrpl2blogspot.com</b><br>
Biografi : <br>
Seorang Lelaki yg tumbuh dan besar di sebuah Kota di kalimantan Selatan. Lelaki
Yg Mempunyai Motivasi tinggi dalam Meraih Mimpinya dan diantara sekian banyak Mimpinya
adalah menjadi seorang pendidik agar bisa menjadi sumber manfaat bagi orang-orang
disekitarnya. ada yg mengatakan dia unik, namun ada juga yg mengatakan dia aneh. Tapi,
terlepas dari itu semua, dari semua kebebasan orang untuk menilai dirinya, di bangga
dan bersyukur menjadi dirinya, <b>FARIS</b>
</pre>
</td>
<td width="150" align = "center" valign = "center" height="150">
<img src="gitar.jpg" height="100" width="100"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</font>
</body>
</html>
demikian layout yg saya buat terima kasih telah mengunjungi blog saya....
Klo ada mau download langsung klik aja link dibawah ini
http://www.4shared.com/zip/vjcIkVc2/tugaspadedi-demolayout.html
GW ngepost 1 persatu aja Dari Layout, koneksi ke mysql sampa ke CRUD
Sebelum Lo coba ini pastiin broser lo sesuai dengan versinya, gw memakai versi firefox 18.0
Langsung aja ke layoutnya.
Pertama Folder xampp atau mysql simpan di htdocs buat folder baru....
Beri aja nama filenya
index.php ini adalah inti dari semuanya jadi lo jalanin ini duluan
isi dari index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"> <h1>Belajar Web Desain</h1>
</div><!--ini akhiran header-->
<div id="menu">
<marquee><h2>Belajar HTML dan PHP Bersama Faris SMKN 4 Banjarmasin</h2></marquee>
</div><!--ini akhiran menu-->
<div id="main">
<div id="kiri">
<ul>
<li><a href="index.php?menu=home">Home</a></li>
<li><a href="index.php?menu=html">HTML</a></li>
<li><a href="index.php?menu=css">CSS</a></li>
<li><a href="index.php?menu=jsp">Java Script</a></li>
<li><a href="index.php?menu=abm">About ME</a></li>
</ul>
</div><!--ini akhiran kiri-->
<div id="kanan">
<?php include("menu.php");?>
</div><!--ini akhiran kanan-->
</div><!--ini akhiran main-->
<div id="halat">
</div><!--ini akhiran halat-->
<div id="footer">
<h2>Copyright © created By Faris Abdillah</h2>
</div><!--ini akhiran footer-->
</div><!--ini akhiran wrapper-->
</body>
</html>
ini cssnya
save dlu gambar background sama headernya disini
buat dlu folder baru dengan nama gambar
Ini background lo kasih nama aja background.jpg
simpan dengan style.css, sama seperti nama style diatas, gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
@charset "utf-8";
/* CSS Document */
body{
background-image:url(gambar/background.jpg);
}
h1{
margin:0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
font-size:66px;
}
#menu h1{
margin:0px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
}
h2{
margin:0;
text-align:center;
}
#wrapper{
border:#CC6600 solid 10px;
border-radius:10px;
width: 960px;
margin: 0 auto;
}
#header{
background:url(gambar/header.jpg);
height:150px;
}
#menu{
background:#FF9900;
padding:1px;
}
#main{
overflow:hidden;
background:#FFFFFF;
}
#kiri{
float: left;
min-height:400px;
width:200px;
}
#kanan{
border-left:1px solid #CCCCCC;
float:right;
min-height:400px;
width:750px;
}
#halat{
background:#CCCCCC;
height:40px;
}
#footer{
clear:both;
padding: 20px;
background:#FF3300
}#kiri ul{
margin:1px;
padding:0;
list-style:none;
}
#kiri ul li{
display:block;
margin:15px;
}
#kiri a{
display:block;
background:#ff9900;
text-decoration:none;
color:#CC0000;
padding: 3px 15px;
border:1px solid #006699;
border-radius:10px;
}
#kiri a:hover{
background-color:#ff8400;
}
menu.php
<?php
@$menu=$_GET['menu'];
if($menu=='home'){
include('home.php');
}elseif($menu=='html'){
include('html.php');
}elseif($menu=='css'){
include('css.php');
}elseif($menu=='jsp'){
include('jsp.php');
}elseif($menu=='abm'){
include('abm.php');
}
else{
include('home.php');
}
?>
Kalo Sampai Sini LINK Yg ada di INDEX nggak bkal Jalan karena file terpisah
buat aja nama filenya
home.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman Home</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam home.php</h2>
</body>
</html>
html.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman HTML</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam html.php</h2>
</body>
</html>
css.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman CSS</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam css.php</h2>
</body>
</html>
jsp.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman JavaScript</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam jsp.php</h2>
</body>
</html>
Dan Ini yg terakhir tpi terserah lo mau lu ikutin apa nggak...
klo ngga lo ikutin, lo harus hapus link about me diatas.. karna ngga bkal guna
abm.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Table</title>
</head>
<body>
<font>
<table border = '0' align = "center">
<tr>
<td rowspan = "2" width='570' height = '550' valign = 'top' align = "justify">
<h2>Faris's Profile</h2>
<pre>
Nama : <b>Faris</b><br>
NIM : 3132<br>
Jurusan : Rekayasa Perangkat Lunak<br>
Tempat Tanggal Lahir : Banjarmasin, 07 september 1996<br>
Alamat : Jl. Kayutangi Ujung Komp. Berkah RT. 42<br>
Kecamatan Alalak Utara<br>
Kotamadya Banjarmasin<br>
</pre>
Riwayat Pendidikan :<ol type ="A">
<li>MI Al-hamid Banjarmasin 2005-2008)</li>
<li>MTs Negeri Mulawarman Banjarmasin (2008-2011)</li>
<li>SMK Negeri 4 Banjarmasin (2011-Sekarang)</li>
</ol>
<pre>
Email : farisrpl2@gmail.com<br>
Homepage : <b>farisrpl2blogspot.com</b><br>
Biografi : <br>
Seorang Lelaki yg tumbuh dan besar di sebuah Kota di kalimantan Selatan. Lelaki
Yg Mempunyai Motivasi tinggi dalam Meraih Mimpinya dan diantara sekian banyak Mimpinya
adalah menjadi seorang pendidik agar bisa menjadi sumber manfaat bagi orang-orang
disekitarnya. ada yg mengatakan dia unik, namun ada juga yg mengatakan dia aneh. Tapi,
terlepas dari itu semua, dari semua kebebasan orang untuk menilai dirinya, di bangga
dan bersyukur menjadi dirinya, <b>FARIS</b>
</pre>
</td>
<td width="150" align = "center" valign = "center" height="150">
<img src="gitar.jpg" height="100" width="100"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</font>
</body>
</html>
demikian layout yg saya buat terima kasih telah mengunjungi blog saya....
Klo ada mau download langsung klik aja link dibawah ini
http://www.4shared.com/zip/vjcIkVc2/tugaspadedi-demolayout.html
