Web Development At Localhost And Webhosting 1

Web Development At Localhost And Webhosting

SMKN 1 BANGKINANG JOB SHEET LAPORAN PRAKERIN Program Keahlian : Teknik Komputer Dan Jaringan Nama : DEWA

Tanggal : 22 April 2013 NIS : 3239

Tempat DU DI : Politeknik Caltex Riau (PUSKOM) Judul : Web Development At Localhost & webhosting

A. Teori Dasar 1. Pengertian Joomla

Joomla! adalah Sistem manajemen konten (CMS) yang bebas dan terbuka (free opensource)

ditulis menggunakan PHP dan basisdata MySQL untuk keperluan di internet maupun

intranet. Joomla pertamakali dirilis dengan versi 1.0.0. Fitur-fitur Joomla! diantaranya

adalah sistem caching untuk peningkatan performansi, RSS, blogs, poling, dll. Joomla!

menggunakan lisensi GPL. Asal kata Joomla sendiri berasal dari kata Swahili yang

mengandung arti "kebersamaan".

2. Pengertian Xampp XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan

kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri

(localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan

penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP

merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.

Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server

yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.

3. Pengertian Template

Template adalah pola/layout dari sebuah website yang sudah didesain sedinamis mungkin

dan sudah jadi/tinggal pakai, bisa di edit sedikit lalu upload di website dan tampilan website

akan berubah.

4. Pengertian Upload

Mengunggah/upload adalah proses mengirim data (umumnya berbentuk berkas) dari

komputer pribadi ke suatu sistem seperti server web, server FTP atau sistem serupa

5. Pengertian Widget

Dalam istilah internet merupakan “kode portabel ( biasanya DHTML, JavaScript atau Adobe

Flash ) yang dipasang ( diinstall, atau sederhananya, copy paste ) pada suatu halaman web,

yang memiliki suatu fungsi tertentu dan menjadi suatu bagian dalam halaman web

tersebut.” istilah lain untuk widget : gadget, badge, module, webjit, capsule, snippet, mini,

flake, application, dll.

6. Pengertian Webhosting

Web Hosting adalah salah satu bentuk layanan jasa penyewaan tempat di Internet yang

memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau produknya

di web / situs Internet. Tempat dapat juga diartikan sebagai tempat penyimpanan data

berupa megabytes (mb) hingga terabytes (tb) yang memiliki koneksi ke internet sehingga

Web Development At Localhost And Webhosting 2

data tersebut dapat direquest atau diakses oleh user dari semua tempat secara simultan.

Inilah yang menyebabkan sebuah website dapat diakses bersamaan dalam satu waktu oleh

multi user.

7. Pengertian Database

Data Base / Basis data : kumpulan informasi yang disimpan dalam disk komputer secara

sistematis. Software yang digunakan untuk membuat, mengola, memelihara, memonitor

dan memindah database disebut DBMS (Database Management System). Contoh mysql

B. Tujuan Dan Manfaat - Akan Memberikan sebuah pengetahuan baru yang tidak pernah di ajar secara formal di

sekolah yakni tentang webhosting. - Siswa dapat mengenal dan mengetahui apa itu webhosting - Siswa dapat membangun sebuah website sederhana menggunakan joomla - Siswa dapat mempelajari tentang basis data (database) mysql - Siswa dapat mengenal dan mempelajari joomla secara baik dan tepat

C. Keselamatan Kerja - Gunakan Software sesuai dengan fungsinya - Perhatikan juga spesifikasi minimum yang di butuhkan oleh software yang kita gunakan

D. Alat Dan Bahan - Sebuah PC/Laptop - Software Xampp 1.8.1 www.apachefriends.org/en/xampp-windows.html

- Joomla 1.7.3 http://joomla.org/download.html

- Template Joomla http://themza.com

- Web Browser http://mozilla.org

E. Langkah Kerja Dan Gambaran Kerja A. Mengubah DNS/Host Localhost Menjadi Domain kita sendiri

Di sini saya akan memberikan sedikit tips and trick yakni mengubah domain localhost menjadi domain kita sendiri di sini saya mengubah domain localhost tersebut dengan domain dewa. Berikut ini cara mengubahnya :

- Pertama buka file “C:\WINDOWS\system32\drivers\etc\hosts” menggunakan notepad atau aplikasi editor text lainnya di sini saya menggunaka notepad ++

- Kemudian sisipkan text di bawah ini tepat di bawah text “127.0.0.1 localhost”

Web Development At Localhost And Webhosting 3

127.0.0.1 dewa

Notes *) Text dewa Bisa anda ganti sesuai dengan keinginan anda

- Kemudian save file tersebut (ctrl + s) - Kemudian untuk membuktikannya kita masukan domain http://dewa tersebut ke address

sbar browser kita jika di alihkan ke http://dewa/xampp itu artinya proses pembuatan domain/host kita berhasil

B. Installasi Joomla Secara Offline Di Localhost 1. Install Aplikasi xampp untuk membangun web server localhost kita

- Pertama unduh terlebih dahulu software xamppnya. Anda bisa mengunduhnya di http://www.apachefriends.org/en/xampp-windows.html

- Setelah software xampp tersebut terunduh lalu double click/jalankan installer xamppnya

Web Development At Localhost And Webhosting 4

- Kemudian pada menu Component centang semua pilihan/option yang di sediakan lalu klik next

- Pada langkah seanjutnya klik install

- Lalu Tunggu hingga proses installasi selesai

- Setelah installasi selesai maka akan keluar sebuah messagebox seperti gambar di bawah ini

Web Development At Localhost And Webhosting 5

Klik button yes untuk menjalan xampp control panel yang telah terinsatall di computer kita

- Pada GUI/Interface xampp klik button start pada apache dan mysql

2. Installasi Joomla

- Pertama unduh terlebih dahulu file joomla yang akan kita gunakan untuk membuat web local kita. Anda bisa mengunduhnya di sini http://joomla.org/downloads.html

- Setelah cms joomla tersebut terunduh lalu buka explorer/my computer anda di path C:\xampp\htdocs kemudian buatlah sebuah directory baru dengan nama” joomla” kemudian extract file joomla-173.rar yang baru kita unduh tadi ke folder joomla tersebut

- Kemudian buka browser anda dan masukan url ini http://localhost/joomla/ ke address bar

browser tersebut

- Maka Akan muncul page installasi joomla. pada langkah ini kita bisa memilih bahasa yang di

gunakan pada saat installasi di sini saya menggunakan bahasa English

Web Development At Localhost And Webhosting 6

- Lalu akan muncul page pre-checking (Halaman Pengecekan component joomla) klik “next”

jika semua komponen joomla tersebut lengkap atau tidak ada yang rusak.

- Pada Page License (halaman Persyaratan dan persetujuan) GPL klik “next”

- Pada Page “Database Configuration” Setting :

Database Type : Mysql Hostname : Localhost #Hostname in your server Username : root #username phpmyadmin Password : “ ” #kosongkan saja Database name : “Dewa” #terserah anda

Web Development At Localhost And Webhosting 7

- Pada Page “FTP Configuration” klik next

- Kemudian pada page configuration isi form tersebut sesuai keinginan anda :

- Kemudian pada page Finish klik button “Remove Installastion folder”

- Setelah Folder “installation” di hapus maka website cms berbasis joomla kita kini sudah bisa di akses dengan memasukan url ini http://localhost/joomla ke address bar pada browser

Web Development At Localhost And Webhosting 8

anda dan untuk mengakses admin page(Configuration) bisa di akses dengan url http://localhost/joomla/administrator/

- Berikut ini tampalan awal (home page) joomla default

- Tampilan Page Admin Configuration login

3. Modifikasi tampilan laman Joomla (Mengganti Template) dan membuat posting baru

- Pertama Login terlebih dahulu ke laman admin page sesuai dengan username dan password yang anda setting pada page configuration di saat melakukan instalasi di http://localhost/joomla/administration

- Setalah anda login dan masuk ke halaman control panel dari joomla “kita akan membuat

category baru untuk artikel yang nantinya akan kita buat” di menu “content – category

manager – add new category“

- Lalu isikan title dari category yang anda ingin kan di sini saya mengisi title dengan

“Antivirus”

Web Development At Localhost And Webhosting 9

- Setelah category baru terinstall maka langkah selanjutnya kita akan membuat article baru

dengan cara klik menu “Content – article manager – add new article”

- Kemudian buat article anda semanarik mungkin sesuai dengan apa yang ingin anda

sampaikan/curahkan di web page anda

*) Notes

Title : isi sesuai dengan judul artikel yang ingin anda buat Category : pilih category sesuai dengan judul article anda Status : Puclised (Artinya artikel akan langsung di publish dan bisa di lihat) Featured : jika “yes” maka article tersebut akan muncul di laman utama web anda Article text : isi dari artikel anda

- Selanjutya kita akan mengubah tampilan joomla agar menjadi lebih menarik menggunakan

template yang bias di unduh secara gratis di http://themza.com di sini saya menggunakan

template “computer store” yang di lengkapi dengan image slider 450 px menggunakkan

jQuery” dengan cara klik menu : “Extension – Extension manager” lalu browse file .zip dari

template yang tadi sudah kita unduh “kemudian klik upload & install”

Web Development At Localhost And Webhosting 10

- setelah template terinstall, buka page template dengan cara klik menu “Extension –

Template Manager” kemudian klik tanda bintang yang ada di table template yang baru saja

kita install

- Setelah Tema yang baru saja kita install di gunakan sebagai theme default dari site kita maka

tampilan site kita pun akan berubah sesuai dengan thema yang kita install.

Web Development At Localhost And Webhosting 11

C. Installasi Joomla Secara online di webhosting 1. Pertama buatlah sebuah akun di webhosting. Di sini saya menggunakan webhosting

http://idhostinger.com dan menggunakan paket gratis dengan

Space : 2 GB

Bandwith : 10 GB

Mail : 2 Account Mail

Subdomain : 2 Subdomain

Berikut ini cara pembuatan akun di idhostinger.com

2. Buka situ http://idhostinger.com

3. Kemudian klik button “buat akun”

4. Setelah klik button “order sekarang” di sini saya memilih hosting gratis

5. Kemudian Isikan form sesuai dengan data kita.

6. Lalu klik “buat akun”

7. Kemudian Anda Harus Memverifikasi akun email anda dengan cara buka email anda lalu Klik

Link hash untuk memverifikasi akum email anda. Di sini saya menggunakan email

admin@dewafiles.p.ht

8. stelah itu klik tab "Kontrol Panel" di account idhostinger anda

Web Development At Localhost And Webhosting 12

9. kemudian klik button “buat akun baru”

10. setelah itu pilih type akun untuk hosting anda sesuai dengan keinginan anda.. di sini saya memilih hosting gratis dengan space 2 GB

11. Setalah itu isikan form domain/subdomain sesuai dengan keinginan anda.. di sini saya

menggunakan subdomain http://web-dewa.p.ht dengan sub domain yang free tapi jika anda

ingin menggunakan domain seperti domain “.com .net .co.id dll” anda harus membayar

tagihan terlebih dahulu agar domain anda bias di gunakan biasanya harga domain tersebut

terganting dari hostinger yang kita gunakan dan juga type domain yang kita gunakan.

12. setelah semua form terisi kemudian klik button “buat”

13. lalu tunggu hingga proses pembuatan akun baru anda selesai.

14. Kemudian pada tab “control panel” klik button “beralih” untuk masuk ke akun yang telah

anda buat tadi

Web Development At Localhost And Webhosting 13

15. Setelah kita berada di dashboard lalu pilih menu “Penginstall Otomatis”

16. Kemudian Pilih “Joomla”

17. kemudian isikan username dan password untuk login di admin page joomla anda, dan url

path untuk tempat file joomla yang akan di extract. Di sini saya menggunakan url/path

default yakni http://web-dewa.p.ht

18. kemudian tunggu higga proses installasi selesai...

19. finish.. (untuk installasi joomla sudah selesai)

Web Development At Localhost And Webhosting 14

D. Membuat Filehosting Menggunakan Dewafiles

1. Pertama Download terlebih dahulu Dewafiles anda bisa mengunduhnya di website

resmi dari Megasoft informer di http://megasoft-id.com atau http://blog.megasoft-

id.com

Notes *)

Dewafiles Adalah sebuah CMS/Script PHP Sederhana yang berfugsi untuk membangun

sebuah web filehosting (upload dan download file). Dewafiles ini termasuk products

yang cukup di gemari oleh costumer dari Megasoft Informer selain karna license nya

GPL (free), dewafiles ini juga cukup mudah untuk di install dan di gunakan di server

anda.

2. Kemudian setelah dewafiles beserta databasenya terunduh. Buka explorer/My

computer dengan path C:\xampp\htdocs kemudian buatlah sebuah folder baru dengan

nama “dewafiles” kemudian extract file dewafiles versi 3.zip ke folder tersebut

3. Kemudian buatlah sebuah database baru di phpmyadmin anda dengan nama

“dewafiles” http://dewa/phpmyadmin

4. Kemudian setelah database dewafiles terbuat maka kita masuk ke database tersebut

dengan cara klik database dewafiles yang ada di menu bar sebelah kiri

Web Development At Localhost And Webhosting 15

5. Setelah Anda masuk ke database dewafiles lalu klik tab menu “import”

6. Kemudian browse dan upload database yang sudah kita unduh tadi ke database

dewafiles

7. Kemudian Klik “Go”

8. Tunggu hingga proses importing database selesai

9. Setalah itu edit/buka file C:\xampp\htdocs\dewafiles\koneksi.php menggunakan

notepad atau text editor lainnya. Di sini saya meggunakan notepad ++

Web Development At Localhost And Webhosting 16

10. Kemudian Ganti text $db = “my_sites” dengan text $db = “dewafiles” sesuai dengan

database yang tadi kita buat yakni dewafiles

11. Kemudian Buka Web filehosting kita dengan url http://dewa/dewafiles

12. Kemudian kita setting web filehosting kita dengan cara login ke admin page dari dewafiles tersebut http://dewa/dewafiles/admin Notes *) Username : Admin Password : admin

13. Kemudian setelah login kita ubah settingan untuk username dan password ketika login

ke admin page dengan cara klik menu Admin yang ada di leftside menu sidebar

Web Development At Localhost And Webhosting 17

14. Kemudian ubah semua settingan default username dan password sesuai dengan keinginan anda

15. Dan anda bisa mengkontrol semua akses user dan file yang di upload oleh user. Beikut

ini list kegunaan leftmenu sidebar Home Semua informasi dari web filehosting anda dari total pengunjung untuk

hari ini hingg jumlah member yang telah mendaftar di filehosting kita Users di menu ini anda dapat mengetahui info user yang terdaftar di

filehosting anda dan di sini anda juga bisa menghapus akun2/user2 tertentu.

Files di menu ini anda dapat melihat semua file yang telah di upload oleh

member/user lainnya dan anda juga dapat menghapus file2 tersebut. Admin di menu ini anda dapat menset/mengatur Username dan password

ketika login ke admin page Config :Pengaturan Umum seperti jika ada yang mengunduh file maka user

tersebuat harus login terlebih dahulu atau tidak untuk dapat mengunduh file2 tersebut

Statistik di menu ini anda dapat melihat statistic web anda berdasarkan tanggal

dengan type jumlah page hits dan jumlah file di download

Web Development At Localhost And Webhosting 18

E. Membuat Web server Sederhana di linux 1. Pertama Donwload terlebih dahulu xampp for linux di http://www.apachefriends.org/download.php?xampp-linux-1.8.1.tar.gz

2. Lalu setelah xampp terdownload buka terminal dengan cara ctrl + alt + T 3. Kemudian unzip file file “xampp-linux-1.8.1.tar.gz” dengan cara tar xvfz xampp-linux-1.8.1.tar.gz -C /opt

4. Seteah itu jalankan xamppnya dengan cara sudo tar xvfz xampp-linux-1.7.4.tar.gz -C /opt

5. Lalu buka browser dan masukan url ini http://localhost/ ke address bar browser Anda

6. Kemudian untuk menaruh file agar terupload ke localhost. Copy file tersebut ke

system/opt/lampp/htdocs

Web Development At Localhost And Webhosting 19

F. Kesimpulan Berdasarkan Proses Pembuatan Mengubah DNS/Host Localhost Menjadi Domain kita sendiri Web joomla localhost di windows, Web joomla di Webhosting (online), Pembuatan Filehosting Sederhana menggunakan Dewafiles, dan Membuat Web server sederhana di ubuntu. Maka dapat di simpukan bahwa dalam membuat web yang dinamis itu tidaklah sulit, karna sudah ada beberapa cms open source yang dapat kita gunakan. Dan dalam pembuatan web ini bisa kita lakukan secara online dan offline. Jadi terserah kita mau menggunakan yang online atau offline. Tapi kalau menurut saya sih untuk proses pembelajaran awal baiknya menggunakan yang offline (localhost) saja,s selain koneksi yang cepat dalam mengirim query dan mengexcute file, di localhost ini juga kita dapat menghemat waktu dan biaya yang kita gunakan. dan yang harus di perhatikan di sini adalah ketika kita ingin membuat web local/offline pastikan bahwa apache server, php, phpmyadmin, dan mysql sudah terinstall/terpasang di computer anda. Tanpa adanya apache server maka host/domain localhost tidak akan dapat di kunjungi (Server not found).

G. Saran Saran yang dapat saya sampaikan adalah apabila ingin membuild/membangun sebuah web gunakanlah cms yang up to date. artian up to date di sini adalah menggunakan versi yang terbaru dari cms tersebut agar plugin2 yang baru comfitaible dengan versi cms yang kita pakai. Dan juga gunakanlah xampp yang terbaru karna menurut saya semangkin tinggi versi sebuah software/cms yang kita gunakan maka dapat di pastikan feature-feature yang di sediakan software/cms tersebut lebih banyak dan kualitasnya pun pasti lebih baik.dan saya berharap apa yang saya tuliskan di joobsheet saya ini dapat bermanfaat bagi pembaca joobsheet ini terutama guru pembimbing saya di SMKN 1 Bangkinang yang telah menugaskan saya untuk membuat joobsheet ini. Saya menyadari bahwa joobsheet ini masih jauh dari kesempurnaan, oleh sebab itu saya mohon maaf apabila ada kesalahan dalam penulisan joobsheet yang saya buat ini. Terimakasih