Search This Blog
Halo Guys, Sekarang admin sudah kembali dari hiatus. Wah, lama banget ea saya hiatus nya. Ini karena setelah Lulus sekolah, saya jadi banyak pekerjaan di tempat kerja. Jadi, mumpung ada luang waktu, saya kembali menulis Blog tutorial.
Kali ini spesial "Kembali dari Hiatus", saya belum bisa langsung ngelanjutin tutorial tentang Dreamweaver, jadi saya langsung pemanasan dulu. Yaitu saya akan mengasih tutorial tentang "Cara menghubungkan Server Lokal dengan XAMPP".
Langsung saja ikuti langkah - langkah berikut :
Kali ini spesial "Kembali dari Hiatus", saya belum bisa langsung ngelanjutin tutorial tentang Dreamweaver, jadi saya langsung pemanasan dulu. Yaitu saya akan mengasih tutorial tentang "Cara menghubungkan Server Lokal dengan XAMPP".
Langsung saja ikuti langkah - langkah berikut :
- Buka XAMPP Control Panel
- Lalu klik tombol Start pada "Apache" dan "MySQL"
- Tunggu sampai Apache dan MySQL mendapatkan Port(s)
- Buka Browser
- Ketik "localhost" (tanpa tanda petik) pada Address Bar
- Maka Tampilannya akan muncul.
Sebenarnya, tampilannya gk kyk gambar diatas sih.. Itu karena saya sudah menghapus tampilan Awal XAMPP Localhost nya, jadi gitu deh. Maaf yaa... :v :v
Lalu, untuk memastikan apakah MySQL nya bisa diaksees atau tidak, lakukan langkah - langkah berikut :
- Pada Browser, Ketik "localhost/phpmyadmin" (tanpa tanda petik) pada Address Bar
- Maka tampilan MySQL nya akan muncul.
Nah, demikianlah tutorial yang saya bagikan kali ini, walaupun singkat semoga bermanfaat untuk kalian. Terima Kasih.
Ilham Saputra
December 06, 2018
New Google SEO
Bandung, Indonesia
XAMPP Tutorial : Cara menghubungan Server Lokal (Edisi Kembali dari Hiatus)
Posted by Dreamweaver Tutorial on Thursday, 6 December 2018
Hai. Akhirnya saya memposting tutorial baru untuk anda semua setelah sekian lamanya Hiatus gara - gara banyak tugas sekolah, hiatusnya pun gk ngasih tahu dulu, hehehe. Rencananya saya mau hiatus lagi untuk sekitar 3 bulan saja (gak lama - lama) karena fokus Ujian Kompetensi, Simulasi dan UNBK. Tapi gak apa apa, Insya Allah selama hiatus saya akan memikirkan tutorial yang berkenaan dengan website dan Dreamweaver dan mempostingnya disini lagi, janji.
Ok langsung saja pada tutorial kali ini berkenaan dengan Desain Web, yaitu Tampilan Web Responsive.
Tampilan
web responsive merupakan tampilan web yang memungkinkan situs website
untuk menyesuaikan atau merespon bagaimana, dimana dan dengan apa website
tersebut dilihat/diakses oleh seseorang. Hal ini tentu mempengaruhi layout
website tersebut secara eksklusif, dan dapat mempengaruhi apa yang ditampilkan
pada perangkat tertentu, seperti di ponsel, atau di perangkat yang memiliki
layar sentuh. Manfaat dari tampilan web responsive adalah supaya
tampilan website tersebut dapat dibuka di segala perangkat, baik itu computer,
laptop / notebook, bahkan smartphone sekalipun.
Tapi
bagaimana cara membuatnya? Tentu saja kembali lagi pada program HTML dibantu
dengan CSS. Pada tutorial ini saya akan menggunakan Dreamweaver untuk
Skripsinya. Berikut ini adalah skrip dan langkah – langkah cara membuat tampilan
web responsive.
1. Pada
Dreamweaver, buat file HTML baru. Lalu simpan dengan nama “index.html”
2. Langsung
saja skrip kode HTML – nya. Skripnya ada di bawah ini.
<!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 rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="headmenu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1>Dreamweaver Tutorial</h1>
<nav
class="menu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
</header>
<div
class="main-content">
<section
class="content">
<article>
<h3>Judul Artikel
1</h3>
<p
style="text-align: justify">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus
metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus
pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis,
pulvinar eu neque.</p>
</article>
</section>
<section
class="content">
<article>
<h3>Judul Artikel
2</h3>
<p
style="text-align: justify">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus
metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus
pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis,
pulvinar eu neque.</p>
</article>
</section>
</div>
<aside>
<section class="sidebar">
<h3>Tags</h3>
<p><a
href="#">HTML</a>, <a
href="#">CSS</a>, <a
href="#">MySQL</a>, <a
href="#">PHP</a>, <a href="#">Visual
Basic</a>, <a href="#">Tutorial</a>, <a
href="#">Design</a>, <a
href="#">CorelDraw</a>, <a href="#">Manga
Studio</a>, <a href="#">Download</a></p>
</section>
<section class="sidebar">
<h3>Related
Post</h3>
<ol>
<li><a
href="#">Post 1</a></li>
<li><a
href="#">Post 2</a></li>
<li><a
href="#">Post 3</a></li>
</ol>
</section>
</aside>
<footer>Copyright
© 2018 Dreamweaver Tutorial</footer>
</div>
</body>
</html>
Jangan lupa disimpan. Sehingga
tampilannya menjadi seperti gambar dibawah ini.
Kenapa
kayak gitu tampilannya? Karena belum diberi CSS. Untuk memberi tampilannya,
kita lanjutkan pada langkah ketiga.
1. Buat file
CSS baru. Lalu simppan pada folder yang sama dengan File Name nya “style.css”
2. Langsung saja
skrip kode CSS nya. Skripnya ada dibawah ini.
.wrapper {
width: 90%;
margin-top: 50px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #F5F5F5;
}
.sidebar h3 {
background-color: #2E5711;
display: block;
margin: 0px;
padding: 5px;
color: #FFF;
}
a {
color: #172F06;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
display: block;
margin: 0px;
padding: 0px;
background-color: #2E5711;
}
header h1 {
display: block;
padding: 10px;
margin: 0px;
font-size: 48px;
color: #FFF;
}
.menu ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: auto;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #203E0B;
border-bottom-color: #203E0B;
}
.menu ul li a {
color: #FFF;
text-decoration: none;
white-space: nowrap;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
margin-left: 1px;
}
.menu ul li a:hover {
background-color: #316A09;
}
.headmenu ul li a:hover {
background-color: #316A09;
}
.content {
display: block;
padding: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CDE9C7;
background-color: #FFFFFF;
}
.main-content {
display: block;
overflow: auto;
width: 65%;
float: left;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 25px;
}
.sidebar {
display: block;
margin-bottom: 10px;
background-color: #FFFFFF;
padding-bottom: 10px;
}
aside {
width: 25%;
display: block;
float: right;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 25px;
}
footer {
clear: both;
display: block;
background-color: #2E5711;
color: #FFF;
padding: 10px;
}
.menu ul li {
display: block;
float: left;
}
.headmenu ul {
background-color: #172F06;
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
left: 0%;
top: 0%;
right: 0%;
overflow: auto;
}
.headmenu ul li {
display: block;
float: left;
}
.headmenu ul li a {
white-space: nowrap;
display: block;
margin-left: 1px;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
color: #FFF;
text-decoration: none;
}
body,td,th {
font-family: "Comic Sans MS", cursive;
background-color: #385E13;
}
/*Style Media Kueri*/
@media screen and (max-width:478px)
{
body {
font-size: 13px;
background-color: #385E13;
}
}@media screen and
(max-width:740px) {
.main-content{
width: 100%; margin:auto}
.menu ul {
border-bottom-style: none;
}
.menu ul li {
float:none}
.menu ul li a {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #203E0B}
aside {
width: 100%; margin:auto}
.sidebar {
display: block;
margin-bottom: 0px;}
img {
max-width: 100%;
height: auto;
}
Jangan
lupa disimpan. Sehingga tampilannya seperti gambar dibawah ini.
Ok, itulah
tutorial Membuat tampilan web Responsive. Dari tutorial ini, anda dapat
mempraktekan dan mengembangkannya.
Sudah dijelaskan pada artikel sebelumnya bahwa website
statis yaitu website yang isinya bersifat statis. Web ini sangat cocok untuk
perusahaan berskala kecil yang ingin memberikan informasi singkat mengenai keberadaan
perusahaan, produk atau jasa yang diberikan.
Nah, sekarang kita akan mulai membuat website statis itu.
Adapun software yang kita perlukan untuk membuat dan mengeksekusi website,
yaitu :
a.
Dreamweaver (yang saya gunakan yaitu Adobe
Dreamweaver CS6)
b.
Browser (Seperti Firefox, Chrome, atau Internet
Explorer versi baru)
Sebelum itu, kita harus download dulu berkas yang berisi
gambarnya, linknya yang ada dibawah gambar.
Lalu Simpan folder "media" pada Dreamweaver Site folder anda
Kita harus tahu dulu dimana tata letak webnya dengan cara
membuat sketsa layout diatas kertas.
Ketika kita sudah tahu sketsa layout, kita mulai membuat
website. Disini, saya membuatnya dengan kode HTML. Dibawah inilah kode
HTML-nya.
Pertama : kita akan mengatur atribut websitenya.
Kedua : kita buat ruang layoutnya menggunakan Div tag ditempatkan didalam
kode <body>...</body>.
<div class="wrapper">
</div>
Ketiga : kita akan buat Header dan navigasi-nya dan ditempatkan di
dalam kode div tag yg sudah dibuat.
<header>
<h1>Ilham Blog </h1>
<nav>
<ul>
<li><a
href="">Home</a></li>
<li><a
href="">Designs</a>
<ul>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
</ul>
</li>
<li><a
href="">Tutorials</a>
<ul>
<li><a
href="">Getting Ready</a></li>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
<li><a
href="">Publication</a></li>
<li><a
href="">Hosting</a></li>
</ul>
</li>
<li><a
href="">Downloads</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</header>
Keempat : kita akan membuat layout isi/konten pada website dan
ditempatkan di dalam div tag dibawah kode </header>.
<section class="content">
<article>
<figure>
<img src="media/css2.jpg" width="246"
height="195" />
</figure>
<h3>Mengenal CSS Style</h3>
<p>Cascade Style Sheets (atau biasa disebut CSS Style) adalah
suatu aturan yang digunakan untuk menentukan font pada tulisan yang akan
ditampilkan dalam bentuk HTML atau dokumen web lainnya.</p>
<p> </p>
</article>
</section>
Kelima : kita akan membuat layout Sidebar atau aside yang ditempatkan
didalam div tag dibawah kode </section>
<aside>
<section>
<banner>Related Post</banner>
<a
href="">Designs</a>
<a
href="">Tutorials</a>
<a
href="">Downloads</a>
<a
href="">Static Page</a>
<a
href="">Dynamic Page</a>
<a
href="">Publication</a>
<a
href="">Hosting</a>
</section>
</aside>
Keenam : kita akan membuat footer ditempatkan didalam div tag dibawah
kode </aside>
<footer><a href="">Home</a>
</footer>
Kode-nya hampir siap. Dibawah ini adalah website yang sudah dihasilkan
tapi belum sempurna karena belum diberi CSS style dan gambar
Dibawah ini adalah kode CSS untuk website yang setengah jadi. Letakkan kode
ini di dalam kode <head> dibawah kode <title>.
<style type="text/css">
.wrapper {
background-color:
#FFF;
width: 900px;
margin-top: 10px;
margin-right:
auto;
margin-bottom:
10px;
margin-left: auto;
}
header {
font-weight: bold;
display: block;
clear: both;
padding-top: 1px;
padding-bottom:
1px;
font-size: 24px;
padding-right:
0px;
padding-left: 0px;
}
nav ul {
font-size: 14px;
font-weight: bold;
background-color:
#666;
display: block;
padding-top: 0px;
padding-right:
0px;
padding-bottom:
22px;
padding-left: 0px;
border-top-width:
1px;
border-top-style:
solid;
border-top-color:
#fff;
list-style-type:
none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
color: #FFF;
text-decoration:
none;
background-color:
#666;
white-space:
nowrap;
display: block;
margin-left: 1px;
padding-top: 2px;
padding-right:
40px;
padding-bottom:
2px;
padding-left:
40px;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#FFF;
}
article {
margin-top: 0px;
margin-right: 0px;
margin-bottom:
20px;
margin-left: 0px;
display: block;
padding-bottom:
25px;
padding-top: 10px;
}
aside {
display: block;
float: left;
width: 220px;
padding-right:
0px;
padding-top: 0px;
padding-bottom:
0px;
padding-left:
10px;
margin-bottom:
20px;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
}
figure {
display: block;
padding: 10px;
margin: 0px;
float: left;
}
hgroup {
display: block;
padding-bottom:
25px;
margin-bottom:
25px;
}
ul li a:hover {
background-color:
#999;
}
li:hover ul {
display: block;
position:
absolute;
padding: 0px;
}
aside section a:hover {
background-color:
#eee;
}
footer a {
color: #FFF;
text-decoration:
none;
}
footer a:hover {
text-decoration:
underline;
}
.content {
display: block;
width: 650px;
float: left;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#eee;
}
banner {
background-color:
#666;
display: block;
font-weight: bold;
color: #FFF;
padding-top: 4px;
padding-right:
0px;
padding-bottom:
4px;
padding-left: 0px;
border-right-width:
1px;
border-left-width:
1px;
border-right-style:
solid;
border-left-style:
solid;
border-right-color:
#000;
border-left-color:
#000;
}
aside section a {
display: block;
padding: 10px;
color: #000;
text-decoration:
none;
border-bottom-width:
1px;
border-bottom-style:
solid;
border-bottom-color:
#eee;
}
footer {
display: block;
clear: both;
background-color:
#666;
padding-top: 20px;
padding-bottom:
20px;
padding-right:
0px;
padding-left: 0px;
text-align:
center;
}
li:hover li {
font-size: 12px;
float: none;
}
li:hover a {
background-color:
#999;
}
li:hover li a:hover {
background-color:
#b6b6b6;
}
body,td,th {
font-family:
Calibri;
}
body {
background-image:
url(media/bg.jpg);
background-repeat:
repeat-x;
}
</style>
Setelah itu, simpan dalam format HTML.
