MaDesign

Mata kuliah : Web Design

Dosen Pengampu :

• Bpk. Sucipto, S.Kom., M.Kom.
• Agus Tianda, A.Md.
• Habib Marzuqi, A.Md.

Hosting Wordpress dari Localhost

Sebelumnya sudah dibahaskan bagaimana cara install wordpress menggunankan localhost?

Sekarang tinggal di hosting deh.

Bagaimana cara mehostingnya? Biar bisa dilihat sama semua orang.

This One. . . .

Pertama siapkan file database yang sudah selesai, lalu buka di "localhost/phpmy admin" pilih database lalu exsport setelah selesai klik kirim, seperti ini

Untuk hostinganya saya memilih idhostinger. Buka idhostinger lalu buatlah akun idhostinger.
Setelah selesai klik FTP

Lalu akan muncul seperti ini

Setelah dibuat Copy lah "Host, Port, Username dan Password" ke dalam kolom FileZilla. Download lah FileZilla, ini adalah perangkat untuk mengupload semua data. Check link FileZilla.com. Isilah Dalam kolom Seperti ini

Lalu klik QuickConnect. Setelah selesai buatlah akun Database di hostinger di dalam MySQL, seperti ini

Setelah selesai, bukalah file manager pada hostinger akan muncul seperti ini

Salinlah database yg dari MySQL ke data yg disediakan seperti username ke username dan seterusnya. Setelah itu kembali ke FileZilla, lalu buka wordpress yang ada didalam file htdocs xampp, lalu pindahkan file ke public html FileZilla seperti ini

Tunggulah data sedang mengimport dan agak sedikit lama. Setelah selesai cobalah cek di web alamat yg telah anda buat, ini hasil hostingan saya 

Nah sekian tutorial untuk mehosting wordpress localhost.

Selamat Mencoba guys :)

Good Luck. . . .

INSTALLING WORDPRESS

Apa itu Wordpress?
Adalah salah satu aplikasi web yang terkenal dikalangan blogger. Selain sebagai blog, Wordpress juga digunakan sebagai CMS (Control Management System) karena mudah untuk dimodifikasi sesuai dengan kebutuhan pengguna.

Bagaimana cara menginstall nya?
Check this out. . .

Pertama, instal wordpress dan XAMPP di laptop atau PC. Setelah itu "extract" file wordpress pada folder XAMPP dalam file "htdocs". Seperti ini :

Lalu bukalah XAMPP dan aktifkan "Apache" dan "My SQL"

Selanjutnya bukalah browser dan buatlah database lalu ketik "localhost/phpmyadmin"

Pilihlah "New", maka akan muncul seperti ini

Isilah kolom creatdatabase lalu creat.
Selanjutnya bukalah tab baru dan ketik "localhost/(nama folder wordpress yg di extract di htdocs)"

Tampilan pertama akan seperti ini lalu lanjutkan dengan klik let's go! Untuk selanjutnya akan muncul tampilan seperti ini

Isilah Basis data dengan nama yang sebelumnya dimasukan di "localhost/phpmyadmin",
untuk nama pengguna isilah dengan "root" dan untuk password kosongkan saja lalu klik kirim.
Selanjutnya

Klik "Run the install"
And than

Isilah Site Title sesuai dengan judul yang diiinginkan lalu install Wordpress.
Selanjutnya

Selamat Wordpress sukses di instal. Login dengan user name dan password yang telah disesuaikan tadi. Dan inilah tampilan pertama Wordpress yang telah dibuat

Untuk mengatur akun dan yang lainya tambahkan saja "localhost/wp/wp-admin

Itulah cara sederhana untuk menginstal wordpress.
Selamat mencoba :)

HOSTING GRATIS !!!

Hosting adalah tempat atau space dalam internet untuk menyimpan data. Biasanya untuk menyimpan website kita yang kita buat dalam aplikasi yang masih menjadi localhost, dan untuk bisa mengakses kedalam internet maka website kita harus dihosting.

Banyak perusahaan penyedia hostingan. Ada hosting gratis dan ada hosting berbayar. Semuanya ada kelebihan dan kekuranganya.

Hosting berbayar adalah hostingan yang dikenakan biaya sesuai dengan kebutuhan pengguna. Kelebihanya, hostingan berbayar ini menjadi sepenuhnya milik kita.

Hosting gratis adalah hostingan yang tidak dipungut biaya sepeserpun, namun perusahaan penyedia juga tidak mau rugi dan hasilnya pada hostingan gratis banyak iklan yang tidak bisa kita atur seperti pada hosting berbayar.

Disini akan membahas bagaimana cara membuat hostingan gratis sederhana dengan memakai idhostinger.

Pertama siapkan bahan hostingan yang sudah dibuat di aplikasi seperti Dreamweaver dsb, dan biasanya tersedia dalam bentuk index.

Kedua ketik https://www.hostinger.co.id/ pada halaman, maka akan muncul tampilan seperti ini 

Lalu isilah kolom yang sudah ada sesuai dengan petunjuk. 

selanjutnya setelah klik mendaftar maka akan muncul seperti ini

Klik resend comfirmation link untuk mekonfirmasi tahan selajutnya. Maka akan muncul seperti ini 

Klik kirim ulang email untuk mengkonfirmasi email yang digunakan. Pada laman ini bisa mengedit profil sesuai yang diinginkan.

Setelah itu buka email anda dan buka pesan dari idhostinger, maka akan muncul seperti ini 

Klik link tersebut maka akan langsung seperti ini

Klik order pada kolom gratis, dan akan tampil seperti ini

Pilih subdomain karena lalu isilah kolom yang sudah disediakan, lalu klik Lanjutkan maka tahap selanjutnya 

Isilah komentar anada dan jangan lupa klik CAPTCHA lalu order, maka selanjutnya ialah

Alamat hosting sudah berhasil dibuat, selanjutnya untuk mengisi content hostingan adalah sebagai berikut :

Pertama klik alamat domain maka akan muncul seperti ini 

Lalu klik kelola, maka

Akan banyak pilihan menu, lalu klik import website maka seperti ini

Setelah muncul tampilan seperti ini, maka buka folder bahan yang berbentuk index yang telah dsiapkan, lalu move file nya

Sebelumnya semua file yang akan di impor harus dalam bentik file ZIP. lalu move 

Tunggulah beberapa saat, maka

Setelah fle berhasil diunggah maka bukalah domain anda pada halaman baru, maka hasilnya seperti ini

Selamat hostingan telah berhasil dan bisa diakses oleh siapa saja :)

Demikian tutorial membuat hostingan gratis dengan menggunakan idhostinger.

Selamat mencoba :)

Cara Membuat Website dengan Menggunakan Dreamweaver cs6 HTML

Ada banyak cara untuk membuat website, disini saya akan menjelaskan sedikit tentang cara bagaimana membuat website sederhana sekali dengan aplikasi Dreamweaver cs6.

Pertama, buka aplikasi Dreamweaver cs6 pada PC/Laptop lalu pilih site pada bagian bar atas

Setelah di save lalu klik File di bagian atas bar lagi

Klik HTML lalu create

Setelah itu pilih Insert lalu klik Table dan akan muncul seperti ini, sesuaikan dengan keinginan

Dan hasilnya muncul seperti ini

Lalu setelah itu untuk menghilangkan border pada table bias block table yang dinginkan lalu klik kanan dan akan muncul seperti ini

Pada table pertama saya akan memasukan gambar untuk Header nya dan cara memasukan gambar adalah seperti ini

Lalu akan muncul seperti ini

Setelah klik Ok maka sesuaikan gambar dengan yang diinginkan.

Lalu pada table selanjutnya isilah menu bar yang diinginkan, untuk merubah background maka pertama block terlebih dahulu table nya lalu klik kanan pilih Edit Tag dan akan muncul seperti ini

Dan jangan lupa untuk menyimpan file ini dengan cara klik file lalu pilih save as lalu ubah nama dengan index.html

Untuk tahap selanjutnya, kita akan membuat laman pertama untuk tampilan blog. Kita harus membuat new tab lagi sama seperti pembuatan pertama kali dan ubah nama nya dengan welcome.html, silahkan edit seperti ini pada bar split atas dengan sudah yang ditandai

Setelah di save, lalu kembali lagi pada hal index.html dan editlah pada bagian split seperti yg sudah ditandai dan jangan lupa untuk menyimpan lagi (save).

Maka hasil sementara akan seperti ini, klik F12 untuk melihat setiap hasil sementara

Sekarang kita akan mengisi content untuk menu yang telah kita buat, disini saya hanya memasukan dua menu saja yaitu beranda dan info. Untuk beranda pertama kita buat lagi laman dan ubahlah nama file nya dengan beranda.html . isilah content yang anda inginkan sama seperti yang diatas jika anda akan memasukan table. Disini saya hanya memasukan tulisan saja. Setelah itu kembalilah ke laman index.html dan buka lah bar split dan editlah seperti ini jangan lupa untuk memblock tulisan BERANDA pada Layout

Maka hasil sementara ini seperti ini

Selanjutnya saya akan memasukan content pada menu INFO, cara pembuatanya sama saja dengan menambahkan laman dan ubahalah menjadi INFO.html lalu isikan content sesuai keinginan setelah itu save lalu kembali lagi ke laman index.html, lalu edit sama seperti sebelumnya dan save maka hasilnya akan seperti ini

Nah, sekian dari saya. Mohon maaf blog ini masih banyak keurangan dan mohon untuk kritik saranya supaya menjadi lebih baik lagi. Terima kasih sudah membaca.

See ya :)

LAYOUT WEB

BAGIAN-BAGIAN LAYOUT DAN FUNGSINYA

• Pengertian Layout

Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.
Source : https://ciakmedia.wordpress.com/2014/08/16/pengertianb-layout/

• Bagian-bagian Layout 

1. Header adalah bagian paling atas yang berfungsi untuk membuat judul atau gambar sesuai dengan yang diinginkan dalam pembuatan web. 
2. Menu adalah kumpulan bar untuk memilih atau berpindah content. 
3. Content adalah isi dari web tersebut yang ingin di tampilkan atau tampilan profile pemilik web bisa berupa gambar, suara, video dsb. 
4. Sisi kanan dan sisi kiri adalah content tambahan yang diperlukan bisa berupa iklan atau daftar isi web. 
5. Footer adalah bagian paling bawah yang biasanya berisi link, komentar dan gambar dsb.