Jumat, 29 Maret 2019

Ekstraksi HTML dan Teks dengan Regex

Ekstraksi HTML dan Teks dengan Regex

Ekstraksi Umum

Memisahkan antara tag HTML dengan teks di sekitarnya:
var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
var results = [];
test.replace(/([^<>]*?)(<\/?[-:\w]+(?:>|\s[^<>]*?>)|$)/g, function(a, b, c) {
    if (b) results.push(b);
    if (c) results.push(c);
});

console.log(results);
Hasil:
[
    'foo ',
    '<a b="c">',
    'bar',
    '</a>',
    ' baz ',
    '<b>',
    ' qux yo"s ',
    '<c>',
    '<d>',
    ' wut?'
]
Dengan cara ini Anda dapat melakukan manipulasi teks dengan aman tanpa harus mempengaruhi tag HTML. Caranya adalah dengan mengecek terlebih dahulu apakah anggota merupakan tag HTML atau teks:
var output = "";
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    // Is this a HTML tag or text?
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // this is a HTML tag …
        output += s;
    } else {
        // do something with text …
        output += s.replace(/"/g, '&quot;');
    }
}

console.log(output);
Hasil:
'foo <a b="c">bar</a> baz <b> qux yo&quot;s <c><d> wut?'

Ekstraksi Spesifik

Kode di bawah ini akan memisahkan antara tag HTML dengan nama tertentu saja, sehingga teks bisa saja berisi tag HTML yang diperbolehkan. Ini berguna jika Anda ingin melakukan manipulasi teks di luar tag tertentu saja, misalnya tag <kbd><pre><script> dan <style>:
var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? <kbd>ignore this yo"s</kbd>';
var results = [];
test.replace(/(.*?)(<\/?(?:kbd|pre|script|style)(?:>|\s[^<>]*?>)|$)/g, function(a, b, c) {
    if (b) results.push(b);
    if (c) results.push(c);
});

console.log(results);
Hasil:
[
    'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? ',
    '<kbd>',
    'ignore this yo"s',
    '</kbd>'
]
Berikut ini adalah cara mengubah karakter " yang berada di luar tag <kbd> menjadi &quot;:
var output = "";
var skip = false;
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // check whether the HTML tag is an opening or closing tag …
        skip = s[1] && s[1] !== '/';
        output += s;
    } else {
        output += !skip ? s.replace(/"/g, '&quot;') : s; // replace or skip …
    }
}

console.log(output);
Hasil:
'foo <a b=&quot;c&quot;>bar</a> baz <b> qux yo&quot;s <c><d> wut? <kbd>ignore this yo"s</kbd>'

Versi PHP

PHP sudah memiliki fungsi khusus untuk menangani tugas ini:
$test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
$results = preg_split('#(<\/?[-:\w]+(?:>|\s[^<>]*?>))#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

var_dump($results);
Untuk melakukan ekstraksi tag HTML secara spesifik:
$results = preg_split('#(<\/?(?:kbd|pre|script|style)(?:>|\s[^<>]*?>))#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

Dukungan Markup

Mendukung hampir semua markup seperti yang dinyatakan dalam dokumentasi Markdown Extra, kecuali markup catatan kaki, abbreviasi, daftar definisi, tautan ber–referensi dan gambar ber–referensi.
Server lokal atau localhost atau virtual web server atau virtual web hosting merupakan server web yang bersifat offline. Ketika sebuah situs web yang asli bisa diakses dengan cara mengetik alamat seperti http://www.example.com, maka sebuah situs web lokal pada umumnya dapat diakses dengan cara mengetik alamat http://localhost. Server lokal digunakan sebagai alat bantu untuk membuat situs web secara offline tanpa koneksi internet. Di dalam sebuah aplikasi server lokal biasanya sudah terdapat beberapa fitur yang ada di dalam server web online yang ada di internet pada umumnya seperti PHPMyAdmin, PHP, MySQL dan Apache. Aplikasi yang paling sering digunakan —terutama untuk menangani berkas-berkas dengan ekstensi .php— adalah WAMPSERVER dan XAMPP.
Proses instalasi sangat mudah: Unduh salah satu aplikasi tersebut sesuai dengan tipe Sistem Operasi yang Anda pakai (32 bits atau 64 bits). Buka berkas hasil unduhan, kemudian akan muncul jendela bimbingan instalasi aplikasi, setelah itu tinggal klik next… next… next… saja, I agree with the term of service… dan seterusnya sampai muncul tombol Finish.
WampServer Logo
Sebagai contoh, di sini Saya menggunakan WAMPSERVER sebagai server lokal. Yang paling penting untuk Anda perhatikan adalah ada pada folder www, selebihnya bisa Anda abaikan terlebih dahulu sebagai tahap awal latihan. Masing-masing aplikasi server lokal memiliki nama folder publik mereka sendiri. Sebagai contoh, XAMPP memiliki folder publik bernama htdocs. Tapi secara umum Anda akan dapat menemukan folder-folder publik pada aplikasi-aplikasi semacam ini dengan nama wwwpublic_html dan htdocs. Ini juga akan Anda temukan pada server web yang asli, jadi Anda tidak perlu bingung.
Klik ikon WampServer yang ada di desktop komputer Anda, atau kalau tidak ada Anda bisa mencari programnya melalui tombol Start. Setelah itu akan muncul kotak dialog User Account Control. Klik tombol Yes. Lihat daftar ikon pada Taskbar atau Superbar di sebelah kanan bawah, di situ seharusnya akan muncul ikon WAMPSERVER berwarna merah, yang secara normal seharusnya akan berubah warna menjadi jingga dan kemudian menjadi hijau secara perlahan.
Buka peramban favorit Anda, lalu akses alamat http://localhost. Jika muncul halaman seperti ini, maka itu artinya proses instalasi telah berhasil dilakukan dan server lokal Anda sudah siap untuk digunakan:
Menu WampServer
Halaman awal server WAMP.

www

Kembali ke folder www. Jika sebelumnya Anda tidak mengubah-ubah pengaturan lokasi folder wwwpada saat instalasi, maka folder tersebut seharusnya akan terletak pada lokasi C:\wamp\www. Anda bisa dengan mudah mengakses lokasinya melalui menu:
Menu WampServer
Menu server WAMP.
Anda bisa membuang semua berkas yang ada di dalamnya, tapi untuk berjaga-jaga, Anda bisa membiarkan mereka seperti apa adanya sampai Anda cukup percaya diri untuk membuangnya. Di dalam folder ini Anda bisa memasukkan berkas-berkas web Anda untuk ditampilkan di layar peramban nantinya. Sebagai contoh, Anda membuat berkas bernama tes-halaman.php pada folder ini, maka Anda akan bisa mengakses berkas tersebut melalui alamat http://localhost/tes-halaman.php
Sebenarnya Anda bisa melakukan hal ini di lokasi mana saja di folder komputer Anda, hanya bedanya, Anda tidak akan bisa menerjemahkan kode-kode Hypertext Preprocessor menjadi HTML jika berkas tersebut tidak ditempatkan di dalam folder www. Misalnya Anda membuat berkas tes-halaman.php di desktop, maka Anda bisa membuka berkas tersebut dengan cara klik-kanan pada ikon berkas dan kemudian pilih Open with » Firefox (misalnya). Sehingga pada address bar akan tampil alamat seperti file:///C:/Users/DTE/Desktop/tes-halaman.php
Seperti itu saja dulu. Selanjutnya Anda bisa mencoba belajar bahasa pemrograman PHP atau sekedar mengetes CMS yang Anda unduh di dalam folder ini. Cukup salin dan tempel berkas saja seperti biasa. Target Saya membuat tutorial ini sebenarnya adalah untuk memperkenalkan CMS Mecha pada pembaca, tapi rilis versi stabil yang terakhir masih belum ada dan masih dalam tahap pengetesan.
Berikut ini adalah fungsi PHP terpisah yang telah Saya gunakan untuk mengompresi kode HTMLCSS dan JavaScript pada CMS Mecha.
Fungsi ini akan menunjukkan ukuran sebuah folder/direktori dengan cara menghitung jumlah total ukuran semua berkas yang ada di dalamnya.
// http://stackoverflow.com/a/21409562/1163000
function get_directory_size($path) {
    $size = 0;
    $path = realpath($path);
    if($path !== false) {
        foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path, FilesystemIterator::SKIP_DOTS)) as $object) {
            $size += $object->getSize();
        }
    }
    return $size; // in bytes
}

Penggunaan

echo (get_directory_size('path/to/folder') / 1024) . ' KB';

Lettering PHP

Versi PHP untuk lettering.js
function lettering_PHP($text) {
    $results = '<span class="word-1 char-group">';
    $skip = false;
    $entity_open = false;
    $entity_close = false;
    $index_word = 2;
    $index_letter = 1;
    $letters = preg_split('#(?<!^)(?!$)#u', $text);
    foreach($letters as $letter) {
        $entity_open = $letter == '&';
        $entity_close = $letter == ';';
        if($letter == '<' || $entity_open) $skip = true;
        if($letter == '>' || $entity_close) $skip = false;
        if( ! $skip && $letter == ' ') {
            $results .= '</span> <span class="word-' . $index_word . ' char-group">';
            $index_word++;
        } else {
            if( ! $skip && $letter != '<' && $letter != '>' && $letter != '&' && $letter != ';' && $letter != ' ') {
                $results .= '<span class="char-' . $index_letter . '">' . $letter . '</span>';
                $index_letter++;
            } else {
                if($entity_open) {
                    $results .= '<span class="char-' . $index_letter . '">';
                }
                $results .= $letter;
                if($entity_close) {
                    $results .= '</span>';
                    $index_letter++;
                }
            }
        }
    }
    return '<span aria-label="' . str_replace(array('"', '\''), array('&quot;', '&#039;'), strip_tags($text)) . '"><span aria-hidden="true" class="word-group">' . $results . '</span></span></span>';
}

Penggunaan

<h2><?php echo lettering_PHP('Lorem Ipsum Dolor Sit Amet'); ?></h2>

Sebelum

<h2>Lorem Ipsum Dolor Sit Amet</h2>

Sesudah

<h2>
  <span aria-label="Lorem Ipsum Dolor Sit Amet">
    <span aria-hidden="true" class="word-group">
      <span class="word-1 char-group">
        <span class="char-1">L</span>
        <span class="char-2">o</span>
        <span class="char-3">r</span>
        <span class="char-4">e</span>
        <span class="char-5">m</span>
      </span> 
      <span class="word-2 char-group">
        <span class="char-6">I</span>
        <span class="char-7">p</span>
        <span class="char-8">s</span>
        <span class="char-9">u</span>
        <span class="char-10">m</span>
      </span> 
      <span class="word-3 char-group">
        <span class="char-11">D</span>
        <span class="char-12">o</span>
        <span class="char-13">l</span>
        <span class="char-14">o</span>
        <span class="char-15">r</span>
      </span> 
      <span class="word-4 char-group">
        <span class="char-16">S</span>
        <span class="char-17">i</span>
        <span class="char-18">t</span>
      </span> 
      <span class="word-5 char-group">
        <span class="char-19">A</span>
        <span class="char-20">m</span>
        <span class="char-21">e</span>
        <span class="char-22">t</span>
      </span>
    </span>
  </span>
</h2>

Sumber: https://github.com/tovic/lettering-plugin-for-mecha-cms/blob/master/lettering-php/launch.php
Menyisipkan HTML mentah atau statis ke dalam variabel itu mudah. Pakai saja file_get_contents():
$html = file_get_contents('page.html');

echo $html; // tampilkan hasil
Tapi menyisipkan HTML dinamis yang di dalamnya berisi perintah-perintah PHP ke dalam variabel itu tidaklah mudah. Pertama-tama kita harus menyisipkan berkas tersebut ke dalam halaman, tapi jangan sampai berkas tersebut tampil. Kita hanya akan mengambil hasil renderperintah PHP di dalam berkas HTML tersebut untuk kemudian bisa kita simpan ke dalam variabel seperti contoh di atas:
ob_start(); // [1]
include 'page.php'; // [2]
$html = ob_get_contents(); // [3]
ob_end_clean(); // [4]
  1. Memulai output buffering.
  2. Masukkan berkas HTML dinamis ke halaman untuk melakukan render.
  3. Simpan hasil render ke dalam variabel $html.
  4. Matikan output buffering.
Setelah hasil render tersimpan ke dalam variabel, Anda bisa menggunakan variabel tersebut seperti biasa sebagaimana variabel bertipe string digunakan:
echo $html;

1. Array ke Objek

Fungsi

function array_to_object($array) {
    if(is_array($array)) {
        return (object) array_map(__FUNCTION__, $array);
    } else {
        return $array;
    }
}

Contoh Kasus

Sebelum dikonversi…
$test = array(
    'A' => 'Test A',
    'B' => 'Test B',
    'C' => array(
        'CA' => 'Test CA',
        'CB' => array(
            'CBA' => 'Test CBA'
        )
    ),
    'D' => 'Test D'
);

// Pemanggilan...
echo $test['A']; // Hasil => `Test A`
echo $test['C']['CB']; // Hasil => `Test CB`
echo $test['C']['CB']['CBA']; // Hasil => `Test CBA`
Sesudah dikonversi…
...

$object_test = array_to_object($test);

// Pemanggilan...
echo $object_test->A; // Hasil => `Test A`
echo $object_test->C->CB; // Hasil => `Test CB`
echo $object_test->C->CB->CBA; // Hasil => `Test CBA`

2. Objek ke Array

Fungsi

function object_to_array($object) {
    if(is_object($object)) {
        $object = get_object_vars($object);
    }
    if(is_array($object)) {
        return array_map(__FUNCTION__, $object);
    } else {
        return $object;
    }
}

Contoh Kasus

Sebelum dikonversi…
$test = new stdClass;
$test->A = 'Test A';
$test->B = 'Test B';
$test->C = new stdClass;
$test->C->CA = 'Test CA';
$test->C->CB = new stdClass;
$test->C->CB->CBA = 'Test CBA';
$test->D = 'Test D';

// Pemanggilan
echo $test->A; // Hasil => `Test A`
Sesudah dikonversi…
...

$array_test = object_to_array($test);

// Pemanggilan
echo $array_test['A']; // Hasil => `Test A`

PHP

function array_to_list($array, $list_type = 'ul') {
    $output = '<' . $list_type . '>';
    foreach($array as $key => $values) {
        if(is_array($values)) {
            $output .= '<li><a href="#">' . $key . '</a>' . array_to_list($values, $list_type) . '</li>';
        } else {
            $output .= '<li><a href="#' . $values . '">' . $key . '</a></li>';
        }
    }
    return $output . '</' . $list_type . '>';
}

Penggunaan

Ubah array $test menjadi elemen HTML daftar:
// Testing...
$test = array(
    'A' => 'list-A',
    'B' => 'list-B',
    'C' => 'list-C',
    'D' => array(
        'AA' => 'list-AA',
        'AB' => 'list-AB',
        'AC' => 'list-AC',
        'AD' => array(
            'ADA' => 'list-ADA',
            'ADB' => 'list-ADB',
            'ADC' => 'list-ADC'
        ),
        'AE' => 'list-AE'
    ),
    'E' => 'list-E'
);

echo array_to_list($test, 'ol');
Akan menghasilkan ini:
// http://stackoverflow.com/a/2699110/1163000
function sort_array_by_value($key, &$array) {

    $sorter = array();
    $ret = array();

    reset($array);

    foreach($array as $ii => $value) {
        $sorter[$ii] = $value[$key];
    }

    asort($sorter);

    foreach($sorter as $ii => $value) {
        $ret[$ii] = $array[$ii];
    }

    $array = $ret;

}

Contoh Kasus

Sampel array:
$my_array = array(
    array(
        'id' => 1,
        'title' => 'Orange',
        'time' => '2014-03-05 03:00:42'
    ),
    array(
        'id' => 2,
        'title' => 'Banana',
        'time' => '2013-01-06 13:05:15'
    ),
    array(
        'id' => 3,
        'title' => 'Grape',
        'time' => '2011-05-15 01:30:45'
    )
);
Menyortir data berdasarkan nilai dari title …
sort_array_by_value('title', $my_array);

print_r($my_array);
Akan menghasilkan urutan seperti ini:
Array
(
    [1] => Array
        (
            [id] => 2
            [title] => Banana
            [time] => 2013-01-06 13:05:15
        )

    [2] => Array
        (
            [id] => 3
            [title] => Grape
            [time] => 2011-05-15 01:30:45
        )

    [0] => Array
        (
            [id] => 1
            [title] => Orange
            [time] => 2014-03-05 03:00:42
        )

)

PHP

<?php

/**
 * Original => http://phoboslab.org/log/2007/08/generic-syntax-highlighting-with-regular-expressions
 * Usage => `echo SyntaxHighlight::process('source code here');`
 */

class SyntaxHighlight {
    public static function process($s) {
        $s = htmlspecialchars($s);

        // Workaround for escaped backslashes
        $s = str_replace('\\\\','\\\\<e>', $s); 

        $regexp = array(

            // Comments/Strings
            '/(
                \/\*.*?\*\/|
                \/\/.*?\n|
                \#.[^a-fA-F0-9]+?\n|
                \&lt;\!\-\-[\s\S]+\-\-\&gt;|
                (?<!\\\)&quot;.*?(?<!\\\)&quot;|
                (?<!\\\)\'(.*?)(?<!\\\)\'
            )/isex' 
            => 'self::replaceId($tokens,\'$1\')',

            // Punctuations
            '/([\-\!\%\^\*\(\)\+\|\~\=\`\{\}\[\]\:\"\'<>\?\,\.\/]+)/'
            => '<span class="P">$1</span>',

            // Numbers (also look for Hex)
            '/(?<!\w)(
                (0x|\#)[\da-f]+|
                \d+|
                \d+(px|em|cm|mm|rem|s|\%)
            )(?!\w)/ix'
            => '<span class="N">$1</span>',

            // Make the bold assumption that an
            // all uppercase word has a special meaning
            '/(?<!\w|>|\#)(
                [A-Z_0-9]{2,}
            )(?!\w)/x'
            => '<span class="D">$1</span>',

            // Keywords
            '/(?<!\w|\$|\%|\@|>)(
                and|or|xor|for|do|while|foreach|as|return|die|exit|if|then|else|
                elseif|new|delete|try|throw|catch|finally|class|function|string|
                array|object|resource|var|bool|boolean|int|integer|float|double|
                real|string|array|global|const|static|public|private|protected|
                published|extends|switch|true|false|null|void|this|self|struct|
                char|signed|unsigned|short|long
            )(?!\w|=")/ix'
            => '<span class="K">$1</span>',

            // PHP/Perl-Style Vars: $var, %var, @var
            '/(?<!\w)(
                (\$|\%|\@)(\-&gt;|\w)+
            )(?!\w)/ix'
            => '<span class="V">$1</span>'

        );

        $tokens = array(); // This array will be filled from the regexp-callback

        $s = preg_replace(array_keys($regexp), array_values($regexp), $s);

        // Paste the comments and strings back in again
        $s = str_replace(array_keys($tokens), array_values($tokens), $s);

        // Delete the "Escaped Backslash Workaround Token" (TM)
        // and replace tabs with four spaces.
        $s = str_replace(array('<e>', "\t"), array('', '    '), $s);

        return '<pre><code>' . $s . '</code></pre>';
    }

    // Regexp-Callback to replace every comment or string with a uniqid and save
    // the matched text in an array
    // This way, strings and comments will be stripped out and wont be processed
    // by the other expressions searching for keywords etc.
    private static function replaceId(&$a, $match) {
        $id = "##r" . uniqid() . "##";

        // String or Comment?
        if(substr($match, 0, 2) == '//' || substr($match, 0, 2) == '/*' || substr($match, 0, 2) == '##' || substr($match, 0, 7) == '&lt;!--') {
            $a[$id] = '<span class="C">' . $match . '</span>';
        } else {
            $a[$id] = '<span class="S">' . $match . '</span>';
        }
        return $id;
    }
}

?>

CSS

pre {
  display:block;
  background-color:#3F3F3F;
  margin:1em 0;
  padding:1em;
  font:normal normal 13px/1.4 Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  color:#E3CEAB;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
}
pre code {
  font:inherit;
  color:inherit;
}
pre span.N {color:#8CD0D3} /* Numbers */
pre span.S {color:#CC9385} /* Strings */
pre span.C {color:#7F9F7F} /* Comments */
pre span.K {color:#DFC47D} /* Keywords */
pre span.V {color:#CEDF99} /* Vars */
pre span.D {color:#FFFFFF} /* Defines */
pre span.P {color:#9F9D65} /* Punctuations */

Versi PHP

function get_first_image_url($data, $default_url = null) {

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `![alt text](IMAGE URL)`
     * [2]. `![alt text](IMAGE URL "optional title")`
     *
     * ... and the single-quoted version of them
     *
     */
    if(preg_match_all('#\!\[.*?\]\(([^\s]+?)( +([\'"]).*?\3)?\)#', $data, $matches)) {
        return $matches[1][0];
    }

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `<img src="IMAGE URL">`
     * [2]. `<img foo="bar" src="IMAGE URL">`
     * [3]. `<img src="IMAGE URL" foo="bar">`
     * [4]. `<img src="IMAGE URL"/>`
     * [5]. `<img foo="bar" src="IMAGE URL"/>`
     * [6]. `<img src="IMAGE URL" foo="bar"/>`
     * [7]. `<img src="IMAGE URL" />`
     * [8]. `<img foo="bar" src="IMAGE URL" />`
     * [9]. `<img src="IMAGE URL" foo="bar" />`
     *
     * ... and the uppercased version of them, and the single-quoted version of them
     *
     */
    if(preg_match_all('#<img .*?src=([\'"])([^\'"]+?)\1.*? *\/?>#i', $data, $matches)) {
        return $matches[2][0];
    }

    return $default_url; // Default image URL if nothing matched
}

Penggunaan

<img src="<?php echo get_first_image_url($page['content'], 'img/no-image.png'); ?>">
$page['content'] cuma contoh. Anda harus mengambilnya dari konten posting Anda sesuai dengan API pada CMS yang Anda pakai.

Versi JavaScript

function getFirstImageURL(data, noImage) {

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `![alt text](IMAGE URL)`
     * [2]. `![alt text](IMAGE URL "optional title")`
     *
     * ... and the single-quoted version of them
     *
     */
    var matches = /\!\[.*?\]\(([^\s]+?)( +[\'"].*?[\'"])?\)/.exec(data);
    return matches ? matches[1] : noImage;

    /**
     * Matched with ...
     * ----------------
     *
     * [1]. `<img src="IMAGE URL">`
     * [2]. `<img foo="bar" src="IMAGE URL">`
     * [3]. `<img src="IMAGE URL" foo="bar">`
     * [4]. `<img src="IMAGE URL"/>`
     * [5]. `<img foo="bar" src="IMAGE URL"/>`
     * [6]. `<img src="IMAGE URL" foo="bar"/>`
     * [7]. `<img src="IMAGE URL" />`
     * [8]. `<img foo="bar" src="IMAGE URL" />`
     * [9]. `<img src="IMAGE URL" foo="bar" />`
     *
     * ... and the uppercased version of them, and the single-quoted version of them
     *
     */
    matches = /<img .*?src=[\'"]([^\'"]+?)[\'"].*? *\/?>/i.exec(data);
    return matches ? matches[1] : noImage;

}

Penggunaan

var img = '<img src="' + getFirstImageURL(sourceText, 'img/no-image.png') + '">';
document.write(img);
sourceText cuma contoh. Anda harus mengambilnya dari konten posting Anda, misalnya dengan cara ini:
var sourceText = document.querySelector('.post-body').innerHTML;
<("[^"]*"|'[^']*'|[^'">])*>
Cocok untuk pola ini:
  1. <input value='>'>
  2. <input value='<'>
  3. <a href="http://www.nama_web.com">
  4. <br><br/>
  5. <input value="'" id="test"><input value='"' id='test'>
Flat-File Guestbook in PHP
Tampilan Buku Tamu
Saya membuat aplikasi Buku Tamu tanpa basis data dengan PHP. Semua data disimpan di dalam sebuah file TXT sebagai pengganti basis data. Ide asli diambil dari sini.
Pada versi Saya, Saya tidak menggunakan captcha gambar, melainkan hanya menggunakan tantangan matematika yang lebih sederhana namun relatif aman. Kode ini dituliskan secara baru, mulai dari awal dan bukan merupakan hasil modifikasi. Beberapa fitur baru yang Saya berikan:
  • Memungkinkan pengguna untuk menambahkan URL.
  • Tanggal penerbitan tersedia, dan akan ditampilkan di pojok kanan atas secara normal.
  • Memungkinkan pengguna untuk membagikan pesan secara individual melalui tautan permanen.
  • Memungkinkan administrator untuk membuat “database” baru tanpa harus menghapus data yang lama.
  • Memungkinkan administrator dan pengguna untuk memuat data lama melalui parameter URL berupa nama file.
  • Sistem keamanan yang lebih baik:
    • Pengguna wajib menjawab tantangan matematika sederhana.
    • Pembatasan jumlah karakter pada setiap bidang.
    • Secara otomatis mengubah kode HTML menjadi entitas HTML untuk keamanan, dan hanya akan menerjemahkan kode HTML yang diperbolehkan saja.
    • Pesan kesalahan akan tampil lebih jelas, serta data yang telah pengguna masukkan sebelumnya ke dalam formulir akan tetap tersimpan di sana sebelum pengguna berhasil mengirimkan pesannya.
    • Tautan di dalam pesan akan terhapus secara otomatis.
Ekstrak file unduhan untuk mendapatkan folder guestbook. Masukkan folder tersebut beserta isinya ke dalam folder public_html atau www pada server lokal Anda. Tidak perlu konfigurasi khusus. Sekali pasang langsung jalan! Jika Anda ingin melakukan konfigurasi, maka itu hanya sebatas pada penamaan “database”, pengaturan panjang karakter maksimal dan penyesuaian teks pesan peringatan.
Jika sudah selesai, buka alamat http://localhost/guestbook/index.php pada peramban untuk melihat hasilnya.
Tidak ada fitur emotikon. Terlalu berlebihan untuk diterapkan pada aplikasi yang sederhana dan bukan merupakan kebutuhan primer. Anda bisa dengan mudah membuatnya sendiri melalui perintah preg_replace() seperti ini:
$message = preg_replace(
    array(
        '/( |>)\:\-?\)/',
        '/( |>)\:\-?D/',
        '/( |>)\:\-?\)/',
        ...
        ...
    ),
    array(
        '$1<img src="emoticons/smile.gif" alt=":)">',
        '$1<img src="emoticons/laugh.gif" alt=":D">',
        '$1<img src="emoticons/sad.gif" alt=":(">',
        ...
        ...
    ),
$message);

Ketika Data Dirasa telah Penuh

Ketika Anda merasa bahwa file TXT yang Anda buat sudah terlalu besar ukurannya, atau membuat proses muat halaman menjadi lambat, Anda bisa mengatasinya dengan cara mengganti nilai $database dengan nama yang baru untuk menciptakan file TXT baru tanpa harus menghapus yang lama. Untuk memuat data yang lama ke dalam halaman buku tamu agar bisa ditampilkan ke publik (katakanlah Anda telah membuat pengaturan khusus agar pengguna tidak bisa melihat file dengan format TXT), Anda bisa menambahkan parameter data dengan nilai berupa nama “database” seperti ini:
http://localhost/guestbook/index.php?data=database-003
Atau kalau memang data-data di dalam buku tamu Anda itu tidak penting, Anda bisa menghapus file tersebut begitu saja kalau mau. Semua kode sudah Saya lengkapi dengan penjelasan. Silakan dipelajari atau digunakan jika dirasa berguna.

Tidak ada komentar:

Posting Komentar