PEMROGAMAN WEB
PERTEMUAN 1 & 2
Disini saya akan lampirkan tugas – tugas saya di kampus dan ini adalah tugas 1 & 2 saya.
Yang pertama buat las nama file Pertemuan 1 & 2
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-image: url(images/galerycity1.jpg);
color:red; text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:green;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
background-color:#369;
height:290px;
width:1203px;
float:left;
padding:10px;
}
#footer {
background-image: url(images/abu.jpg);
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
________________________________________
<body>
City Gallery
London
Paris
Tokyo
<?php
$page = (isset($_GET[‘page’]))? $_GET[‘page’] : “main”;
switch ($page) {
case ‘Paris’ : include “paris.php”; break;
case ‘Tokyo’ : include “tokyo.php”; break;
}
?>
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com
</body>
</html>
PERTEMUAN 3 & 4
Berikut adalah hasil tugas 3 & 4 yang telah di selesaikan
Pertama kita akan membuat file css. simpan dengan nama style.css
#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:150px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}
Setelah itu, lalu kita membuat file dengan nama nav.html
<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”style.css”></head>
<body>
li><a href=”nav.html”>Home</a></lidingnya)
· Home
· News
· Contact
· About
Biodata
<img src=”012.jpg” width=”200px” height=”200px”>
<p>
Nama : Yusuf Wicaksono<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Tiban Koperasi<br/>
Hoby : sport<br/> </p>
<hr>
<p align=”justify”>
no comment
</p>
</div>
li><a href=”nav.html”>Menu/a></li> (contoh codingnya)
· Menu 5
· Menu 6
· Menu 7
· Menu 8
LONDON
London is the capital and most populous city of England and the United Kingdom.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
London’s ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2)
medieval boundaries and in 2011 had a resident population of 7,375,
making it the smallest city in England. Since at least the 19th century,
the term London has also referred to the metropolis developed around this core.
The bulk of this conurbation forms Greater London,a region of England governed by the Mayor of London and the London Assembly.The conurbation also covers two English counties, the City of London and the county of Greater London,though historically it was split between the City, Middlesex, Essex, Surrey, Kent and Hertfordshire.
Copyright © W3Schools.com
</body>
</html>
Untuk gambarnya, bisa kita rubah dengan yang kita mau.
PERTEMUAN 5 & 6
(File Connection)
<?php
// Algoritma dan Pemrograman WEB, By.Yusuf Wicaksono, 2015
// Teknik Informatika – STT Ibnu Sina Batam
// Set up koneksi kedatabase sesuai dengan user id dan password aplikasi
define(MYSQL_HOST, ‘localhost’);
define(MYSQL_USER, ‘root’);
define(MYSQL_PASS, ‘root’);
define(MYSQL_DB, ‘db_pweb’);
// If we fail to connect, we cant keep going, so we exit
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS);
//$db=mysql_select_db(“csci”) or die(mysql_error());
if (!$db)
{
die(‘<br />Tidak Terhubung KeDatabase “‘ . MYSQL_HOST . ‘”.’);
}
else
{
//echo ‘Connected to MySQL server ‘ . MYSQL_HOST . ‘ as user ‘ . MYSQL_USER .
‘<br/>’;
mysql_select_db(MYSQL_DB);
}
// Calls to MySQL functions go here…
?>
simpan dengan nama file koneksi.php
(File NAV)
<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”file:///C|/AppServ/www/style.css”></head>
<body>
· Home
· News
· Contact
· About
Biodata
<img src=”file:///C|/AppServ/www/012.jpg” width=”200px” height=”200px”>
<p>
Nama : Yusuf Wicaksono<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Tiban Koperasi<br/>
Hoby : Sport<br/> </p>
<hr>
<p align=”justify”>
no comment </p>
</div>
<li><a href=”file:///C|/AppServ/www/search.php”>Search STUDENT</a></li> (contoh codingnya)
Mahasiswa
Copyright © W3Schools.com
</body>
</html>
simpan dengan nama nav.php
(File CSS)
#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:120px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}
simpan dengan nama style.css
