BSI Purwokerto - Belajar Membuat Web (part 5)
1. Masuk folder htdocs
2. Buat folder dengan nama website_2f
3. Didalam folder website_2f buat folder css dan file dengan nama index.html
disimpan dalam folder website_2f
contoh coding/struktur data index.html
<html>
<head>
<title>Membuat layout WEB responsive sederhana HTML dan CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>header</h2>
</div>
<div class="nav">
<a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#">menu 3</a>
</div>
<div class="row">
<div class="content">
<div class="card">
<h2>Judul artikel</h2>
<h5>Rabu, 22 Februari 2018</h5>
<div class="img" style="height:200px;">Image</div>
<p>Deskripsi deskripsi</p>
</div>
</div>
<div class="sidebar">
<div class="widget">
<h2>Widget 1</h2>
</div>
<div class="widget">
<h2>Widget 2</h2>
</div>
<div class="widget">
<h2>Widget 3</h2>
</div>
<div class="widget">
<h2>Widget 4</h2>
</div>
</div>
</div>
<div class="row">
<div class="footer">
<h2>Footer 1</h2>
</div>
<div class="footer">
<h2>Footer 2</h2>
</div>
<div class="footer">
<h2>Footer 3</h2>
</div>
<div class="footer">
<h2>Footer 4</h2>
</div>
</div>
</body>
</html>
Hasil coding
4. Buat struktur data kemudian simpan dalam folder css dengan nama style
Struktur data syle
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
.header {
padding: 10px;
font-size: 40px;
text-align: center;
background: white;
}
.nav {
overflow: hidden;
background-color: #333;
}
.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.content {
float: left;
width: 75%;
}
.sidebar {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 10px;
}
.img {
background-color: #aaa;
width: 100%;
padding: 10px;
}
.card {
background-color: white;
padding: 10px;
margin-top: 10px;
}
.widget{
background-color: white;
padding: 10px;
margin-top: 10px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 10px;
width: 25%;
text-align: center;
background: white;
margin-top: 20px;
display: inline-block;
float: left;
}
@media (max-width: 800px) {
.content, .sidebar,.footer{
width: 100%;
padding: 0;
}
}
@media (max-width: 400px) {
.nav a {
float: none;
width:100%;
}
}
Hasil coding
css (caasading style sheet)
1.insline css
2.internal css
3.eksternal css
INLINE CSS
berada dalam sebuah tag (method: style)
<p style="font-size:12px;color:red">
AMIK BSI PURWOKERTO
</P>
INTERNAL CSS
berada dalam satu halaman/file website
<style type="text/css>
p {
font-size:12px;
color:red;
}
</style>
<body>
<p>AMIK BSI PURWOKERTO</P>
</body>
EKSTERNAL CSS
-membentuk file tersendiri berekstensi (.css)
-pemanggil file css diantara tag <head>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
p {
font-size"12px;
color:red;
}
h1 {
font-size:18px;
color: blue;
}
PHP=> Hypertext Preprocessor
PHP=> Server side (sisi server) / komputer
PHP=> Untuk pemrosesan data/manipulasi data
syntax php:
<?php -> tag pembuka
...... -> statement
?> -> tag penutup
Contoh penulisan syntax PHP:
-Buatlah folder baru di htdocs dengan nama "belajarphp"
-Buatlah file baru dengan nama "contoh.php" dan isikan di dalamnya:
<?php
echo "Ini adalah contoh penggunaan PHP";
?>
-Simpan dalam folder belajarphp & buka di browser
Variabel PHP
Penulisan variabel:
1.Diawali tanda dollar ($)
2.bersifat Case-sensitive
3.Pengisian nilai variabel menggunakan tanda sama dengan (=)
contoh penulisan variabel:
<?php
$nim=12173488;
$nama="Robin";
?>
-Buatlah sebuah file baru,dengan nama "latihan.php",isikan coding berikut:
<?php
$nim=12173488;
$nama="Robin";
echo "Halo! Nama Saya $nama";
echo "<br>";
echo "NIM saya $nim";
?>
-Simpan dalam folder belajarphp dan buka hasilnya di browser
Tipe Data PHP
-String
-Integer
-Float
-Boolean
-Array
Tipe Data String:
-berbentuk text,bisa angka/huruf/simbol
-diapit oleh tanda petik
Contoh tipe data string:
<?php
$coba="Nomor HP saya 0823454166";
?>
Tipe Data Integer:
-berbentuk angka,bilangan bulat
-tidak perlu diapit tanda petik
contoh tipe data integer:
<?php
$nilaiuts=90;
$nilaiuas=85;
?>
Tipe Data Float:
-berbentuk angka,bilangan desimal/pecahan
-tidak perlu diapit tanda petik
contoh:
<?php
$nilaiuts=80.55;
$nilaiuas=80.77;
?>
Tipe Data Boolean:
-hanya ada 2 nilai:false (salah) atau true (benar)
contoh:
<?php
$x = false;
$y = true;
?>
Tipe Data Array:
-menyimpan banyak nilai variabel
contoh:
<?php
$user=("joko","dwi","mulyanto");
echo $user[0];
?>
Manipulasi String pada PHP
strlen() =menghitung jumlah karakter
str_word_count() =menghitung jumlah kata
strrev() =membalikkan urutan karakter
str_replace() =mengganti kata
contoh:
-Buat file baru dengan nama: manipulasi.php
-Isikan codingnya:
<?php
$nama="Bina Sarana Informatika";
echo strlen($nama);
echo "<br>";
echo str_word_count($nama);
echo "<br>";
echo strrev($nama);
echo "<br>";
echo str_replace("Bina","Tempat",$nama);
?>
-Simpan dan lihat hasilnya di browser
