Have an account?

--------------------------------------------------------------------

Silahkan jelajahi anggep aja Blog Sendiri

Jumat, 01 Agustus 2014

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar ternyata banyak yang membutuhkan, ini penulis ketahui dari artikel sebelumnya yaitu WYSIWYG CKEditor Memakai Upload Gambar dengan CKFinder yang ternyata dibaca oleh cukup banyak pembaca. Kali ini penulis ingin membagi pengetahuan tentang WYSIWYG yang benar-benar open source dan free yaitu Tiny MCE dengan diberi plugin yang juga free yaitu JBImages, sehingga mampunyai fitur untuk meng-upload gambar.

Tiny MCE dapat anda dapatkan di website resminya disini. Kali ini penulis lebih memilih menggunakan Tiny-MCE versi 3.xx daripada versi TinyMCE 4.xx karena pada kenyataannya contoh yang penulis dapatkan dan dapat berjalan dengan addons JBImages adalah yang versi 3.xx. Sedangkan JBImages dapat anda dapatkan di website berikut ini.

Setelah semua file didapatkan maka extract file zip TinyMCE ke dalam direktori tiny_mce, kemudian extract juga file zip JBImages ke dalam direktori tiny_mce/plugins/jbimages. Masukkan direktori tiny_mce ke dalam direktori web yang akan menggunakan, sehingga akan menjadi <website>/tiny_mce, jika anda menggunakan XAMPP ada di dalam folder C:/xampp/htdocs/<website>/tiny_mce, jika menggunakan WAMP akan berada di direktori C:/wamp/www/<website>/tiny_mce.

Selanjutkan jangan lupa menyiapkan direktori untuk meletakkan file gambar hasil upload, misalnya di <website>/images. Agar dapat berjalan maka harus dikonfigurasi dengan cara membuka file yang ada di dalam direktori <website>/tiny_mce/plugins/config.php. Pastikan ada baris berikut ini :

$config['img_path'] = '/jurnal/images'; 
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path'];

Ubah baris tersebut menjadi :

$config['img_path'] = '/<direktori-website>/<direktori-gambar>'; 
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path'];

dalam hal ini karena penulis menjalankan web dengan folder C:/xampp/htdocs/tinymce-jbimages-upload-gambar dengan direktori gambar di C:/xampp/htdocs/tinymce-jbimages-upload-gambar/images, maka konfigurasinya menjadi :

$config['img_path'] = '/tinymce-jbimages-upload-gambar/images'; 
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path'];

Kemudian simpan file konfigurasi config.php tersebut. Setelah itu Tiny MCE dengan plugin JB Images siap digunakan. Sebagai contoh kita gunakan pada file yang ada di C:/xampp/htdocs/tinymce-jbimages-upload-gambar/index.php dengan isi sebagai berikut :

   <!-- TinyMCE 3.x -->
 
   <script type="text/javascript" src="tiny_mce/tiny_mce_src.js"></script>
            <script type="text/javascript">
             
            //http://cariprogram.blogspot.com
            //nuramijaya@gmail.com

            tinyMCE.init({
             
              mode : "textareas",
                
              // ===========================================
              // Set THEME to ADVANCED
              // ===========================================
                
              theme : "advanced",
                
              // ===========================================
              // INCLUDE the PLUGIN
              // ===========================================
             
              plugins : "jbimages,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
                
              // ===========================================
              // Set LANGUAGE to EN (Otherwise, you have to use plugin's translation file)
              // ===========================================
             
              language : "en",
                 
              theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
              theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
              theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
             
              // ===========================================
              // Put PLUGIN'S BUTTON on the toolbar
              // ===========================================
             
              theme_advanced_buttons4 : "jbimages,|,insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
                
              theme_advanced_toolbar_location : "top",
              theme_advanced_toolbar_align : "left",
              theme_advanced_statusbar_location : "bottom",
              theme_advanced_resizing : true,
                
              // ===========================================
              // Set RELATIVE_URLS to FALSE (This is required for images to display properly)
              // ===========================================
             
              relative_urls : false
                
            });
             
            </script>
            <!-- /TinyMCE -->
                <form method='post' action=''>
                  <p>
                    Judul :<br/>
                    <input name="judul" id="judul" value="" type="text" />
                  </p>
                    
                    <p>
                    Abstrak :<br/>
                    <textarea name="abstrak" id="abstrak" ></textarea>
                  </p>


                    <p><input name="send" value="Send" type="submit" /></p>
                </form>

Hasilnya, ketika dijalankan dengan URL : http://127.0.0.1/tinymce-jbimages-upload-gambar/index.php akan tampak WYSIWYG Editor TinyMCE dengan Tombol Upload Gambar :

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar

Ketika diklik Upload An Image maka akan muncul jendela Pilih File, Setelah memilih file kemudian klik Upload :

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar

Maka gambar akan muncul di dalam Editor WYSWYG Tiny_MCE dengan Plugins JBImages :

Plugin TinyMCE Upload Image dengan JBImages, WYSIWYG Editor yang Mampu Mengupload Gambar

Jika anda kesulitan, download saja contoh projectnya disini. Jika bingung cara donwload,lihat disini.

Semoga berhasil :D
Diposting oleh Unknown 22 komentar

Jumat, 09 Mei 2014

Menggunakan JCE Editor di Joomla

CJE adalah salah satu extensions editor joomla, dengan menggunakan JCE kita akan lebih mudah dalam membuat artikel di joomla tentunganya deng fitur yang lebih lengkap di bandingkan editor bawaan joomla itu sendiri. Sebelum menggunakan JCE tentunya kita harus mendownload terlebih dahulu JCE Editornya di sini.
downloadlah sesuai versi joomla yang kita gunakan.
setelah itu langung kita instal extensionnya seperti biasa

 Masuk Administrator > Extension > Extensions Manager > Lalu cari file yang tadi kita download dengan meng klik browse... dan klik Upload & install

 Setelah berhasil di instal, lalu pergi ke menu site > Global Configuration
 

Lalu pada tab Site, bagian Default Editor pilih Editor - JCE dan save
 

Lalu cobalah buat artikel baru dan lihat hasilnya... 
Diposting oleh Unknown 0 komentar

Senin, 02 Desember 2013

Mengatur Format Date di SQL Server Menggunakan CONVERT

Standard Date Formats
Date Format
SQL Statement
Sample Output
Mon DD YYYY HH:MIAM (or PM)
SELECT CONVERT(VARCHAR(20), GETDATE(), 100)
Jan 1 2005 1:29PM
MM/DD/YY
SELECT CONVERT(VARCHAR(8), GETDATE(), 1) AS [MM/DD/YY]
11/23/98
MM/DD/YYYY
SELECT CONVERT(VARCHAR(10), GETDATE(), 101) AS [MM/DD/YYYY]
11/23/1998
YY.MM.DD
SELECT CONVERT(VARCHAR(8), GETDATE(), 2) AS [YY.MM.DD]
72.01.01
YYYY.MM.DD
SELECT CONVERT(VARCHAR(10), GETDATE(), 102) AS [YYYY.MM.DD]
1972.01.01
DD/MM/YY
SELECT CONVERT(VARCHAR(8), GETDATE(), 3) AS [DD/MM/YY]
19/02/72
DD/MM/YYYY
SELECT CONVERT(VARCHAR(10), GETDATE(), 103) AS [DD/MM/YYYY]
19/02/1972
DD.MM.YY
SELECT CONVERT(VARCHAR(8), GETDATE(), 4) AS [DD.MM.YY]
25.12.05
DD.MM.YYYY
SELECT CONVERT(VARCHAR(10), GETDATE(), 104) AS [DD.MM.YYYY]
25.12.2005
DD-MM-YY
SELECT CONVERT(VARCHAR(8), GETDATE(), 5) AS [DD-MM-YY]
24-01-98
DD-MM-YYYY
SELECT CONVERT(VARCHAR(10), GETDATE(), 105) AS [DD-MM-YYYY]
24-01-1998
DD Mon YY
SELECT CONVERT(VARCHAR(9), GETDATE(), 6) AS [DD MON YY]
04 Jul 06
DD Mon YYYY
SELECT CONVERT(VARCHAR(11), GETDATE(), 106) AS [DD MON YYYY]
04 Jul 2006
Mon DD, YY
SELECT CONVERT(VARCHAR(10), GETDATE(), 7) AS [Mon DD, YY]
Jan 24, 98
Mon DD, YYYY
SELECT CONVERT(VARCHAR(12), GETDATE(), 107) AS [Mon DD, YYYY]
Jan 24, 1998
HH:MM:SS
SELECT CONVERT(VARCHAR(8), GETDATE(), 108)
03:24:53
Mon DD YYYY HH:MI:SS:MMMAM (or PM)
SELECT CONVERT(VARCHAR(26), GETDATE(), 109)
Apr 28 2006 12:32:29:253PM
MM-DD-YY
SELECT CONVERT(VARCHAR(8), GETDATE(), 10) AS [MM-DD-YY]
01-01-06
MM-DD-YYYY
SELECT CONVERT(VARCHAR(10), GETDATE(), 110) AS [MM-DD-YYYY]
01-01-2006
YY/MM/DD
SELECT CONVERT(VARCHAR(8), GETDATE(), 11) AS [YY/MM/DD]
98/11/23
YYYY/MM/DD
SELECT CONVERT(VARCHAR(10), GETDATE(), 111) AS [YYYY/MM/DD]
1998/11/23
YYMMDD
SELECT CONVERT(VARCHAR(6), GETDATE(), 12) AS [YYMMDD]
980124
YYYYMMDD
SELECT CONVERT(VARCHAR(8), GETDATE(), 112) AS [YYYYMMDD]
19980124
DD Mon YYYY
SELECT CONVERT(VARCHAR(24), GETDATE(), 113)
28 Apr 2006 00:34:55:190
    HH:MI:SS:MMM(24H)
SELECT CONVERT(VARCHAR(12), GETDATE(), 114) AS [HH:MI:SS:MMM(24H)]
11:34:23:013
YYYY-MM-DD HH:MI:SS(24h)
SELECT CONVERT(VARCHAR(19), GETDATE(), 120)
1972-01-01 13:42:24
YYYY-MM-DD HH:MI:SS.MMM(24h)
SELECT CONVERT(VARCHAR(23), GETDATE(), 121)
1972-02-19 06:35:24.489
 
SELECT CONVERT(VARCHAR(23), GETDATE(), 126)
1998-11-23T11:25:43:250
DD Mon YYYY HH:MI:SS:MMMAM
SELECT CONVERT(VARCHAR(26), GETDATE(), 130)
28 Apr 2006 12:39:32:429AM
DD/MM/YYYY HH:MI:SS:MMMAM
SELECT CONVERT(VARCHAR(25), GETDATE(), 131)
28/04/2006 12:39:32:429AM
YY-MM-DD
SELECT SUBSTRING(CONVERT(VARCHAR(10), GETDATE(), 120), 3, 8 ) AS [YY-MM-DD]
SELECT REPLACE(CONVERT(VARCHAR(8), GETDATE(), 11), ‘/’, ‘-’) AS [YY-MM-DD]
99-01-24
YYYY-MM-DD
SELECT CONVERT(VARCHAR(10), GETDATE(), 120) AS [YYYY-MM-DD]
SELECT REPLACE(CONVERT(VARCHAR(10), GETDATE(), 111), ‘/’, ‘-’) AS [YYYY-MM-DD]
1999-01-24
MM/YY
SELECT RIGHT(CONVERT(VARCHAR(8), GETDATE(), 3), 5) AS [MM/YY]
SELECT SUBSTRING(CONVERT(VARCHAR(8), GETDATE(), 3), 4, 5) AS [MM/YY]
08/99
MM/YYYY
SELECT RIGHT(CONVERT(VARCHAR(10), GETDATE(), 103), 7) AS [MM/YYYY]
12/2005
YY/MM
SELECT CONVERT(VARCHAR(5), GETDATE(), 11) AS [YY/MM]
99/08
YYYY/MM
SELECT CONVERT(VARCHAR(7), GETDATE(), 111) AS [YYYY/MM]
2005/12
Month DD, YYYY
SELECT DATENAME(MM, GETDATE()) + RIGHT(CONVERT(VARCHAR(12), GETDATE(), 107), 9)
AS [Month DD, YYYY]
July 04, 2006
Mon YYYY
SELECT SUBSTRING(CONVERT(VARCHAR(11), GETDATE(), 113), 4, 8 ) AS [Mon YYYY]
Apr 2006
Month YYYY
SELECT DATENAME(MM, GETDATE()) + ‘ ‘ + CAST(YEAR(GETDATE()) AS VARCHAR(4)) AS
[Month YYYY]
February 2006
DD Month
SELECT CAST(DAY(GETDATE()) AS VARCHAR(2)) + ‘ ‘ + DATENAME(MM, GETDATE()) AS [DD Month]
11 September
Month DD
SELECT DATENAME(MM, GETDATE()) + ‘ ‘ + CAST(DAY(GETDATE()) AS VARCHAR(2)) AS [Month DD]
September 11
DD Month YY
SELECT CAST(DAY(GETDATE()) AS VARCHAR(2)) + ‘ ‘ + DATENAME(MM, GETDATE()) + ‘ ‘ + RIGHT(CAST(YEAR(GETDATE()) AS VARCHAR(4)), 2) AS [DD Month YY]
19 February 72
DD Month YYYY
SELECT CAST(DAY(GETDATE()) AS VARCHAR(2)) + ‘ ‘ + DATENAME(MM, GETDATE()) + ‘ ‘ + CAST(YEAR(GETDATE()) AS VARCHAR(4)) AS [DD Month YYYY]
11 September 2002
MM-YY
SELECT RIGHT(CONVERT(VARCHAR(8), GETDATE(), 5), 5) AS [MM-YY]
SELECT SUBSTRING(CONVERT(VARCHAR(8), GETDATE(), 5), 4, 5) AS [MM-YY]
12/92
MM-YYYY
SELECT RIGHT(CONVERT(VARCHAR(10), GETDATE(), 105), 7) AS [MM-YYYY]
05-2006
YY-MM
SELECT RIGHT(CONVERT(VARCHAR(7), GETDATE(), 120), 5) AS [YY-MM]
SELECT SUBSTRING(CONVERT(VARCHAR(10), GETDATE(), 120), 3, 5) AS [YY-MM]
92/12
YYYY-MM
SELECT CONVERT(VARCHAR(7), GETDATE(), 120) AS [YYYY-MM]
2006-05
MMDDYY
SELECT REPLACE(CONVERT(VARCHAR(10), GETDATE(), 1), ‘/’, ”) AS [MMDDYY]
122506
MMDDYYYY
SELECT REPLACE(CONVERT(VARCHAR(10), GETDATE(), 101), ‘/’, ”) AS [MMDDYYYY]
12252006
DDMMYY
SELECT REPLACE(CONVERT(VARCHAR(10), GETDATE(), 3), ‘/’, ”) AS [DDMMYY]
240702
DDMMYYYY
SELECT REPLACE(CONVERT(VARCHAR(10), GETDATE(), 103), ‘/’, ”) AS [DDMMYYYY]
24072002
Mon-YY
SELECT REPLACE(RIGHT(CONVERT(VARCHAR(9), GETDATE(), 6), 6), ‘ ‘, ‘-’) AS
[Mon-YY]
Sep-02
Mon-YYYY
SELECT REPLACE(RIGHT(CONVERT(VARCHAR(11), GETDATE(), 106), 8), ‘ ‘, ‘-’) AS
[Mon-YYYY]
Sep-2002
DD-Mon-YY
SELECT REPLACE(CONVERT(VARCHAR(9), GETDATE(), 6), ‘ ‘, ‘-’) AS [DD-Mon-YY]
25-Dec-05
DD-Mon-YYYY
SELECT REPLACE(CONVERT(VARCHAR(11), GETDATE(), 106), ‘ ‘, ‘-’) AS [DD-Mon-YYYY]
25-Dec-2005
Diposting oleh Unknown 0 komentar
Label: , , , ,
Langganan: Postingan (Atom)