Membuat Web Sekolah Agus Sw

Sekolah : SMK Negeri 1 Kota Bima Perihal:Bid. Studi Keah. : Tekn. Komputer &

Jaringan

WEB DESIGNSMK NEGERI 1 KOBI

Mata Pelajaran : Produktif T7Kelas / Semester

:

Guru Penyusun : Agus Setyo Widodo, S.Kom

Pertemuan ke :

MEMBUAT WEBSITE SEKOLAH / GURU (DINAMIS) MENGGUNAKAN JOOMLA 1.5

I. PENGENALAN JOOMLA!

Sudah menjadi sesuatu yang lumrah bagi instansi, perusahaan ataupun badan usaha memiliki website termasuk sekolah. Website merupakan sebuah media yang sangat efektif untuk menjelaskan tentang sebuah instansi ataupun sebuah organisasi ke seluruh penjuru dunia. Artinya informasi yang disajikan dengan menggunakan website adalah informasi yang sifatnya global. Dimana, semua bisa mengakses informasi tersebut.

Pada saat membuat website, tentu kita menginginkan pengoperasian website ini nantinya mudah dan cepat, sehingga waktu dan tenaga kita tidak terbuang banyak dalam pengelolaannya. Dengan adanya content management system (CMS) maka proses pengelolaan sebuah website akan menjadi mudah dan cepat.

CMS (Content Management System) CMS merupakan semacam sistem yang dibuat untuk pengelolaan isi sebuah website sehingga kita lebih cepat dan efisien dalam menambah/menghapus/mengedit konten dan tampilan website. Singkatnya, CMS memungkinkan kita mempunyai/mengelola website tanpa harus memiliki pengetahuan teknis tentang pembuatan website.

CMS di dunia saat ini diantaranya Joomla!, Drupal, PHP-Nuke, PHP-Website, Aura CMS, Mambo Open Source, Post-Nuke, OsCommerce, TYPO3, XOOPS, dll. secara umum, CMS mempunyai karakteristik yang sama. Bersifat modular artinya modul dapat diinstall terpisah, kemudian template juga dapat diinstall terpisah, dan semestinya, modul, componen, template dan lain-lain banyak tersedia di internet.

Diantara banyaknya CMS yang beredar saat ini. Joomla adalah salah satu CMS yang cukup terkenal dan paling banyak digunakan di internet.

Pemanfaatan dari CMS diantaranya untuk :- Web perusahaan, bisnis, organisasi / komunitas;- Partai- Galeri foto- Aplikasi E-Commerce- Website Pribadi/blog- Website Pemerintah- Website Sekolah, Perguruan Tinggi, lembaga pendidikan- Website koran, tabloid, majalah, dll

TIPSSebelum meng-install Jooma di internet, sebaiknya mencobanya terlebih dahulu di komputer kita sendiri. Dalam hal ini web server bersifat lokal.

Setelah website jadi dan telah selesai dimodifikasi, baru kita upload untuk dipublikasikan di internet.


Jaringan



:


Pertemuan ke :

II. INSTALASI

Secara garis besar, ada 3 elemen dasar yang dibutuhkan Joomla!, yaitu :- script PHP : merupakan kode program dalam bahasa PHP yang digunakan untuk

membuat Joomla!- database MySQL : Merupakan tempat penyimpanan data/konten web.- webserver Apache : Digunakan untuk mendukung aplikasi PHP.

Dengan demikian Kita harus meng-install dulu Apache, MySQL, dan PHP. Saat ini kita tidak perlu meng-install satu persatu karena ada sebuah paket yang berisi ketiga software tersebut, yakni xampp. XAMPP dapat di download di www.apachefriends.org/en/xampp-windows.html.

Tahap instalasi yang pertama adalah Instalasi XAMPP dan dilanjutkan instalasi JOOMLA!. Jadi kita harus memiliki paket kedua instalasi tersebut.

File Installer Joomla dan File Installer XAMPP

II.1. INSTALASI XAMPP

NO

TAHAP INSTALASI TAMPILAN

1 - Siapkan file installer XAMPP yang akan diinstall.

- Double klik pada file installer XAMPP

2 Pilihlah bahasa yang akan Anda gunakan, kemudian klik tombol OK

http://www.apachefriends.org/en/xampp-windows.html


Jaringan



:


Pertemuan ke :

3 Klik tombol NEXT, sehingga akan muncul jendela pemilihan folder

4 Klik tombol NEXT, secara default file-file XAMPP akan di-set pada lokasi directory C:\XAMPP

5 Berikutnya klik tombol install untuk memulai proses instalasi.

Anda bisa juga meng-install Apache as Service dan install MySQL as service dengan memberi tanda centang pada kotak di sebelah kiri.

6 Proses instalasi XAMPP sedang berlangsung, tunggulah sampai selesai.


Jaringan



:


Pertemuan ke :

7 Setelah proses instalasi XAMPP selesai, klik tombol Finish

8 Klik tombol Yes tersebut, maka akan muncul XAMPP Control Panel

9 Untuk mengaktifkan, klik tombol Start pada Apache dan MySQL, sehingga statusnya menjadi Runing yang ditandai dengan munculnya ibackground berwarna hijau.


Jaringan



:


Pertemuan ke :

10

Untuk mengecek apakah ketiga aplikasi tersebut berjalan dengan baik, ketik di browser pada addressnya http://localhost


Jaringan



:


Pertemuan ke :

II.2. INSTALASI JOOMLA!Setelah kita sukses menginstall XAMPP di komputer dan dipastikan berjalan dengan benar, maka langkah selanjutnya adalah menginstall Joomla!.Untuk menginstall Joomla! Langkahnya sangatlah mudah.

NO TAHAP INSTALASI TAMPILAN

1 Setelah paket Joomla di extract di C:\xampp\htodcs\namaweb

Setelah itu, buka webbrowser. Kemudian buka URL : http://localhost/ namadiretori akan tampil halaman seperti gambar disamping.Pilih bahasa waktu proses instalasi dan klik NEXT

2 Gambar di samping menunjukkan tentang kebutuhan yang harus dipenuhi untuk menginstall Joomla!. Pastikan semua bertanda Yes berwarna hijau. Kemudian klik Tombol NEXT

3 Halaman berikutnya adalah keterangan tentangj lisensi Joomla!. Sebaiknya dibaca secara seksama untuk mengetahui tentang aturan main penggunaan sofware Joomla! Ini. Untuk melanjutkan proses Installasi, Klik NEXT.

4 Proses berikutnya adalah configurasi database.

Database Type : MySQL Hostname : localhost Username : root

passsword : (kosongkan)

Database Name : db_websmu

Setelah mengisikan infomasi tersebut di atas dengan benar, klik Next

http://localhost/namadiretori

http://localhost/namadiretori


Jaringan



:


Pertemuan ke :

5Gambar di atas adalah konfigurasi FTP. Konfigurasi ini tidak perlu di rubah. Klik next untuk melanjutkan installasi.

6 Halaman berikut adalah konfigurasi utama website.

•Site Name

adalah nama website yang akan kita buat. Misal : Situs Resmi SMK Negeri 1 KOBI

•Your Email

E-mail address yang akan menjadi penanggung jawab website tersebut (webmaster).

Segala informasi yang berkaitan dengan perubahan, installasi dan sebagainya akan

dikirimkan ke email ini. Misal : [email protected] .

• Admin Password

Password administrator yang akan ditanyakan ketika akan melakukan administrasi website.

•Confirm Admin Password :

Konfirmasi password yang telah diisikan sebelumnya.

Jangan lupa untuk mengklik

mailto:[email protected]%20.


Jaringan



:


Pertemuan ke :

tombol Install Sample Data. Kemudian klik tombol next

7 Proses installasi Joomla! Sudah berhasil

Sebagai langkah terakhir adalah kita harus menghapus atau merename direktori installastion yang berada di dalam direktori yang telah kita extract sebelumnya. Untuk melihat hasilnya, klik tombol Site . Jika tidak ada yang salah, maka akan tampil halaman seperti di bawah ini :

Joomla terdiri dari 2 bagian.

1. Bagian pengunjung. Dimana semua orang dapat melihat konten yang disediakan. Untuk masuk ke halaman Pengunjung cukup membuka URL seperti berikut : http://localhost/websmu

2. Bagian adminstrator. Dimana di bagian ini tidak semua orang bisa masuk. Bagian administrator adalah bagaian dimana semua content, tampilan, dan semua yang ditampilkan pada halaman user, diatur. Untuk masuk ke halaman administrator dengan membuka URL sebagai berikut : http://localhost/websmu/administrator

http://localhost/websmu/administrator

http://localhost/websmu/administrator


Jaringan



:


Pertemuan ke :

Isikan

username : admin

password : ………. (password administrator yang anda buat pada proses installasi)

kemudian klik Login akan tampil halaman seperti di bawah ini :

Halaman di atas adalah halaman depan untuk administrator. Dari sinilah administrator dapat melakukan administrasi website.

III. MANAGEMENT CONTENT

Content di joomla dikelompokkan menjadi beberapa kelompok section dan category. Dimana dalam sebuah section terdiri dari beberapa category dan content haruslah diikutkan dalam salah satu kategory. Berikut ini adalah ilustrasi yang menggambarkan hirarki section, kategory dan content items.

SMK NEGERI 1 KOTA BIMA


Jaringan



:


Pertemuan ke :

Section :bagian, seksi, golongan, urusan, belahan. Misal : Prodi, News, dllCategory : kategori, kelompok, sub golongan. Misal : TKJ, TN, Latest News, Flash News, dllContent : isi

• MEMBUAT SECTIONS

Untuk membuat section baru dapat dilakukan melalui menu Content > Section Manager

Halaman di atas adalah section manager dimana section dapat diatur. Baik itu penambahan baru, penghapusan section, edit, delete, publish ataupun unpublish. Untuk membuat section baru, klik icon New. Akan tampil halaman seperti di bawah ini :

Isikan Title dengan nama section.misal : Prodi. Isikan alias sama dengan title atau dikosongkan saja. Pastikan Published pada posisi Yes. Kemudian Access Level pilih


Jaringan



:


Pertemuan ke :

Public. Untuk menyimpan, klik tombol Save atau untuk menyimpan dan melanjutkan pengeditan klik Apply

• MEMBUAT CATEGORY

Untuk membuat category baru, dapat dilakukan menggunakan menu

Contents > Category Manager

Klik icon New untuk membuat category baru. Akan tampil halaman seperti di bawah ini :

Isikan :

Title : dengan nama kategori yang diinginkan. Misal : Elektronika Komunikasi.

Alias : dapat juga diisi sama dengan Title atau dikosongkan saja.

Published : dipilih Yes.

Sections : pilih section yang baru saja dibuat. Misal : Prodi.

Klik Save untuk menyimpan atau Apply untuk menyimpan dan melanjutkan pengeditan. Buatlah beberapa kategory lagi dengan cara yang sama.

• MEMBUAT CONTENT.

Content adalah tulisan atau artikel yang menjelaskan tetang sesuatu. Baik itu berita, profil dan sebagainya. Untuk membuat content baru, dapat dilakukan melalui menu

Content > Article Manager


Jaringan



:


Pertemuan ke :

Untuk membuat artikel baru, klik New maka akan tampil halaman seperti di bawah ini :

Isikan..

Title : ( judul artikel)

Alias : (adalah judul alternatif. Boleh diisikan sama tapi bisa juga dikosongkan.)

Section : (prodi dan category yang diinginkan.)

Kemudian buatkan berita pada teks editor yang telah disediakan.

tombol Readmore pada bagian bawah edito digunakan untuk membuat artikel ditampilkan sebagian, dan akan muncul link readmore.. untuk melihat selengkapnya. letakkan cursor pada teks yang akan dipisah. Kemudian klik readmore.

Untuk menyimpan artikel, klik Save atau klik Apply untuk menyimpan dan melanjutkan penulisan artikel

IV. Management Menu. CMS memang didisain full costumizable termasuk menu. Menu - menu yang sudah ada adalah contoh - contoh menu yang disediakan ketika pertama kali Joomla! Di install. Menu - menu tersebut dapat di tambahkan, dapat ditampilkan / dihilangkan.

Pada saat awal instalasi, joomla terdiri dari beberapa kelompok menu.


Jaringan



:


Pertemuan ke :

● Top menu Menu bagian atas yang terletak di bagian atas halaman

● Main Menu Menu Utama yang adal di sebelah kiri halaman

● Other Menu Menu tambahan

● User Menu Menu yang hanya tampil ketika user login.

● Resource Menu

Menu Tambahan

● Key Concept

Menu Tambahan.

Setiap kelompok menu adalah sebuah modul. Dimana sebuah modul dapat diaktifkan, dan di non aktifkan dan bahkan bisa dihapus serta bisa juga untuk ditambahkan.

Untuk menambahkan kelompok menu baru, dapat dilakukan melalui menu Menus > Menu Manager.

Untuk membuat menu baru, klik New, kemudian akan tampil halaman seperti di bawah ini :

Isikan..

Unique Name : (nama menu misal Program Studi)

Title : (judul menu. Title ini akan tampil di halaman sebagai judul


Jaringan



:


Pertemuan ke :

kelompok menu.)

Description : (menjelaskan tentang menu atau keterangan singkat. Isikan sesuai dengan deskripsi menu.)

Module title : (nama modul. Ingat setiap kelompok menu adalah module.)

Klik Save untuk menyimpan.

MENGAKTIFKAN MENU

Setelah membuat kelompok menu, menu tersebut tidak langsung akan ditampilkan di halaman. Karena statusnya masih Disable. Untuk mengubah statusnya menjadi Enable, haruslah diaktifkan terlebih dahulu melalui menu Extension > Module Manager. Maka akan tampil halaman sbb :

Untuk mengaktifkan, klik pada Item Program Studi untuk mengedit modul tersebut. Maka Akan tampil halamanseperti di bawah ini

Pilih Yes pada pilihan Enabled. Untuk membuat tampilan menu sesuai dengan menu yang sudah ada pada bagian Advanced Parameter isikan _menu pada kolom isian Module Class Suffix. Klik Save untuk menyimpan.

MENAMBAHKAN MENU ITEM Setelah membuat kelompok menu, berikutnya adalah menambahkan menu item yang nantinya akan menampilkan artikel yang ada dalam salah satu kategory ataupun section. Untuk membuat menu items, dari menu Menus > Program Studi. Maka akan tampil halaman seperti di bawah ini :


Jaringan



:


Pertemuan ke :

Klik New untuk membuat menu Item baru. Maka akan tampil halaman seperti di bawah ini :

Menu item yang dibuat adalah menu yang akan menampilakan blog aratikel sebuah kategori. Pada pilihan Select Menu Item Type. Klik Article > Category Blog Layout. Kemudian akan tampil halaman yang akan menampilkan pilihan category.

Pilih kategori pada Kolom pilihan Category. Kemudian Isikan judul Menu pada kolom isian Title Misal : Elektronika Komunikasi. Klik Save untuk menyimpan.


Jaringan



:


Pertemuan ke :

V. INSTALLASI DAN MODIFIKASI TEMPLATE Joomla! Memungkinkan kita mengganti tampilan halaman depan website dengan mudah dan sangat cepat. Yang membuat lebih membahagiakan lagi adalah template untuk joomla! Tersedia banyak sekali di internet dan gratis. Pada saat installasi pertama kali, Joomla! Sudah menyediakan dua buah template. Untuk menambahkan template baru, dapat di download di situs yang menyediakan template. Misalnya siteground.com, joomlahack dan seterusnya.

Untuk menginstall template baru, dari menu Extensions > Install/Uninstall kemudian akan tampil halaman seperti di bawah ini :

Ada beberapa pilihan sumber installasi. Mulai dari file lokal yang sudah kita download sebelumnya ataupun yang sudah diextract direktori, ataupun link dari internet.

Untuk menginstall dari file lokal, klik browse, kemudian pilih file yang merupakan template joomla. Kemudian klik Upload File & Install.

Jika Tampil pesan Install Template Success . Artinya prose installasi sudah berhasil. Untuk mengaktifkan template tersebut, dapat dilakukan melalui menu Extensions > Template Manager akan tampil halaman seperti di bawah ini :

Untuk memilih template yang akan digunakan, klik radio button pada nama template yang baru di install, kemudian klik icon Default. Untuk melihat hasilnya silahkan refresh halaman depan.


Jaringan



:


Pertemuan ke :

VI. UPLOAD JOOMLA! KE INTERNET

Ada beberapa langkah yang harus dilakukan untuk mengupload file ke server hosting di internet.

To Be Continue…

Tidak dilarang keras untuk mengcopy atau memperbanyak isi materi ini. Hak cipta atas ilmu pengetahuan hanya milik Tuhan Yang Maha Kuasa (Allah SWT)

Membuat Web Sekolah Agus Sw

Documents

Transcript of Membuat Web Sekolah Agus Sw