| 
<?php
 require_once('class.php_sqlite3_contact_form.php');
 
 /*
 Just an example of using the class.php_sqlite3_contact_form.php class. Not for production use.
 
 file: example.php_sqlite3_contact_form.php
 title: PHP SQLite3 Contact Form Manager Example
 description: An example of using the php_sqlite3_contact_form class
 license: BSD 3-Clause License <https://opensource.org/licenses/BSD-3-Clause>
 requires: PHP SQLite3
 uses: jQuery for example
 
 */
 
 // create new cform object
 $cform = new php_sqlite3_contact_form('contact_form.db');
 // create tables if they don't exist
 $cform->create_tables();
 
 function show_banned()
 {
 global $cform;
 
 $result = $cform->get_banned_ips();
 $the_str = "<div class='banned-header'>Banned IPs</div><div class='banned-ips'>";
 
 while ($row = $result->fetchArray()) {
 $the_str .= show_banned_row($row);
 }
 $the_str .= "</div>";
 return $the_str;
 }
 
 function show_banned_row($row)
 {
 $the_str = "<div class='ip-row'>";
 $the_str .= "<div class='fld'><div class='ip'>".$row['ip']."</div></div>";
 $the_str .= "<div class='fld'><div class='btn btn-unban-ip' data-ip='".$row['ip']."'>Unban IP</div></div>";
 $the_str .= "</div>";
 return $the_str;
 }
 
 function show_message_row_inner($row)
 {
 $the_str = "";
 $the_str .= "<div class='fld '><input class='def-hide' type=text name='id' value='".$row['id']."' readonly></div>";
 $the_str .= "<div class='fld'><input type=text name='email' value='".$row['email']."'></div>";
 $the_str .= "<div class='fld'><input type=text name='subject' value='".$row['subject']."'></div>";
 $the_str .= "<div class='fld'><textarea name='message'>".$row['message']."</textarea></div>";
 $the_str .= "<div class='fld'><input class='def-hide' type=text name='ip' value='".$row['ip']."' readonly></div>";
 $the_str .= "<div class='fld'><input class='def-hide' type=text name='tstamp' value='".$row['tstamp']."' readonly></div>";
 $the_str .= "<div class='fld fldbtn'><div class='def-hide btn btn-update-message' data-id='".$row['id']."'>Update</div></div>";
 $the_str .= "<div class='fld fldbtn '><div class='def-hide btn btn-reset-message' data-id='".$row['id']."'>Reset</div></div>";
 $the_str .= "<div class='fld fldbtn '><div class='def-hide btn btn-delete-message' data-id='".$row['id']."'>Delete</div></div>";
 $the_str .= "<div class='fld fldbtn '><div class='def-hide btn btn-ban-ip' data-ip='".$row['ip']."'>Ban IP</div></div>";
 
 return $the_str;
 } // end show_message_row_inner
 
 function show_message_row($row)
 {
 $the_str = "";
 $the_str .= "<div class='message' msg-id='".$row['id']."'>";
 $the_str .= show_message_row_inner($row);
 $the_str .= "</div>";
 
 return $the_str;
 } // end show_message_row
 
 function show_messages_list($messages)
 {
 $the_str = "";
 // as divs
 while($row = $messages->fetchArray(SQLITE3_ASSOC))
 $the_str .= show_message_row($row);
 return $the_str;
 } // end show_messages_list
 
 # gets ajax request and then returns json data and quits.
 if(!empty($_GET['ajax']))
 {
 switch($_GET['ajax'])
 {
 
 
 case 'load_banned':
 $return_arr[] = array(
 "command" => 'html',
 "selector" => ".banned-list",
 "msg" => show_banned()
 );
 break; // load_banned
 
 case 'ip_unban':
 $ip = $_POST['flds']['ip'];
 $cform->unban_ip($ip);
 
 $return_arr[] = array(
 "command" => 'alert',
 "msg" => "IP $ip has been unbanned."
 );
 
 $return_arr[] = array(
 "command" => 'html',
 "selector" => ".banned-list",
 "msg" => show_banned()
 );
 
 break; // ip_unban
 
 case 'ip_ban':
 $ip = $_POST['flds']['ip'];
 
 // if ip alreadu banned, alert already banned.
 if($cform->check_banned($ip))
 {
 $return_arr[] = array(
 "command" => 'alert',
 "msg" => "IP $ip is already banned."
 );
 break;
 }
 
 $cform->ban_ip($ip);
 
 $return_arr[] = array(
 "command" => 'alert',
 "msg" => "IP $ip has been banned."
 #"data" => show_banned_list($cform->get_banned_ips())
 );
 
 $return_arr[] = array(
 "command" => 'html',
 "selector" => ".banned-list",
 "msg" => show_banned()
 );
 
 break; // ban_ip
 
 case 'messages_get':
 // $messages = $cform->get_messages();
 // $ret = array();
 // while($row = $messages->fetchArray(SQLITE3_ASSOC))
 // {
 //   $ret[] = array(
 //     "id"             => $row['id'],
 //     "email"         => $row['email'],
 //     "subject"     => $row['subject'],
 //     "message"     => $row['message'],
 //     "ip"             => $row['ip'],
 //     "tstamp"         => $row['tstamp']
 //   );
 // }
 
 $messages_html = show_messages_list($cform->get_messages());
 
 $return_arr[] = array(
 "command"     => 'update_messages_list',
 "data"           => $messages_html
 );
 
 break; // messages_get
 
 case 'message_get':
 // just handle a row fetch for a single message
 // show_message_row($row)
 $id = $_POST['flds']['id'];
 $message = $cform->get_message($id);
 $row = $message->fetchArray(SQLITE3_ASSOC);
 
 $the_str = show_message_row_inner($row);
 
 $return_arr[] = array(
 "command"     => 'update_message_row',
 "id"        => $id,
 "data"           => $the_str
 );
 
 break; // message_get
 
 case 'message_add':
 // print array $_POST
 // print_r($_POST);
 $email    = $_POST['flds']['email'];
 $subject  = $_POST['flds']['subject'];
 $message  = $_POST['flds']['message'];
 $ip       = $_POST['flds']['ip'];
 
 $cform->add_message($email, $subject, $message, $ip);
 
 $return_arr[] = array(
 "command"     => 'reset_message_add_form'
 );
 
 $return_arr[] = array(
 "command"     => 'refresh_messages_list'
 );
 
 $return_arr[] = array(
 "command" => 'enable_input',
 'selector' => '.message-add-form .btn-submit'
 );
 
 break; // message_add
 
 case 'message_delete':
 $id = $_POST['flds']['id'];
 $cform->delete_message($id);
 
 $return_arr[] = array(
 "command"     => 'remove_message_row',
 "id" => $id
 );
 
 break; // message_delete
 
 case 'message_update':
 // print_r($_POST);
 // print_r($_POST['flds']);
 
 $id = $_POST['flds']['id'];
 $email    = $_POST['flds']['email'];
 $subject  = $_POST['flds']['subject'];
 $message  = $_POST['flds']['message'];
 $ip       = $_POST['flds']['ip'];
 
 $cform->update_message($id, $email, $subject, $message, $ip);
 
 $return_arr[] = array(
 "command"     => 'success',
 "id"           => $id
 );
 
 $return_arr[] = array(
 "command"     => 'update_message_row',
 "id"           => $id
 );
 
 break; // message_update
 } // end switch
 
 // if we have a return array, send it back as json for javascript processing
 if(!empty($return_arr) && is_array($return_arr))
 die(json_encode($return_arr));
 
 die(); // end ajax, end program.
 } // end ajax
 
 ?>
 <!-- jQuery example manager -->
 <html>
 <head>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 <script>
 /*
 // send_data structure
 new_arr[key] = {};
 new_arr[key].col = the_col;
 new_arr[key].val = the_val;
 
 var url = "ajax.command_process.php?&ajax=customer_save&id="+db_id;
 do_cmd_post(url, new_arr);
 */
 
 function do_cmd_post(url, send_data)
 {
 
 $.post( url, { flds: send_data /* in php will appear as $_POST['flds']  */ },
 function( return_data ) {
 do_cmd_process(return_data);
 }, "json" ); // punt any returned data to processor
 
 }
 </script>
 
 <style>
 html, body {
 font-family: Arial, Helvetica, sans-serif;
 padding:0;margin:0;
 }
 
 </style>
 
 <script>
 
 function do_cmd_process(data) // handle data coming back from ajax
 {
 
 if (data instanceof Array) {
 data.forEach(function(entry) {
 console.log(entry.command);
 
 //console.log(entry.message);
 // handle returned commands //
 switch(entry.command)
 {
 case 'alert':
 alert(entry.msg);
 break;
 
 case 'reload':
 window.location.replace('./');
 break;
 
 
 case 'update_messages_list':
 $('#messages-list').html(entry.data);
 break;
 
 case 'update_message_row':
 // $the_str .= "<div class='message' msg-id='".$row['id']."'>";
 // the target div is a div with class: .message
 // update html
 $('.message[msg-id="'+entry.id+'"]').html(entry.data);
 // remove any editing class
 $('.message[msg-id="'+entry.id+'"]').removeClass('editing');
 break;
 
 case 'remove_message_row':
 // $the_str .= "<div class='message' msg-id='".$row['id']."'>";
 // the target div is a div with class: .message
 // update html
 $('.message[msg-id="'+entry.id+'"]').remove();
 break;
 
 
 
 case 'refresh_messages_list':
 var id = entry.id;
 var url = "example.php_sqlite3_contact_form.php?&ajax=messages_get";
 do_cmd_post(url, {});
 break;
 
 case 'refresh_message_row':
 var id = entry.id;
 var url = "example.php_sqlite3_contact_form.php?&ajax=message_get";
 do_cmd_post(url, {id: id});
 break;
 
 case 'scrolltop':
 $('html, body').animate({    scrollTop: $('body').offset().top - 190     }, 200);
 break;
 
 case 'reload_messages_list':
 $('#messages-list').load('example.php_sqlite3_contact_form.php #messages-list');
 break;
 
 case 'reset_message_add_form':
 $('#message-add-form').each(function(){
 this.reset();
 });
 break;
 
 case 'reset_message_add_form':
 $('#message-add-form').each(function(){
 this.reset();
 });
 break;
 
 // generic commands //
 case 'alert':
 alert(entry.msg);
 break;
 case 'log':
 console.log(entry.msg);
 break;
 case 'append':
 $(entry.selector).append(entry.msg);
 break;
 case 'prepend':
 $(entry.selector).prepend(entry.msg);
 break;
 case 'html':
 $(entry.selector).html(entry.msg);
 break;
 case 'val':
 $(entry.selector).val(entry.msg);
 break;
 case 'focus':
 $(entry.selector).focus();
 break;
 case 'blur':
 $(entry.selector).blur();
 break;
 case 'clear':
 $(entry.selector).val('');
 break;
 case 'js':
 eval(entry.msg);
 break;
 case 'disable_input':
 $(entry.selector).prop('disabled', true);
 break;
 case 'enable_input':
 $(entry.selector).prop('disabled', false);
 break;
 
 }
 });
 }
 }
 
 </script>
 
 
 
 </head>
 <body>
 
 
 
 <script>
 
 $(document).on('click', '.message', function() {
 // switch all .def-hide on the message to .def-hide-show
 var $this = $(this);
 var $message = $this.closest('.message');
 $message.find('.def-hide').removeClass('def-hide').addClass('def-hide-show');
 });
 
 // on double click, hide if .def-hide-show is showing
 $(document).on('dblclick', '.message', function() {
 // switch all .def-hide-show on the message to .def-hide
 var $this = $(this);
 var $message = $this.closest('.message');
 $message.find('.def-hide-show').removeClass('def-hide-show').addClass('def-hide');
 });
 
 // on editing an input or textarea in .message, apply an editing class to the .message div
 $(document).on('change', '.message input, .message textarea', function() {
 var $this = $(this);
 var $message = $this.closest('.message');
 $message.addClass('editing');
 });
 
 
 
 
 </script>
 
 <style>
 
 
 .section-button-wrapper {
 width:100%;
 margin:0px; padding:0px;
 display: block;
 background-color: #38c172;
 border-bottom: 1px solid #28a162;
 }
 
 
 
 .section-button {
 margin:0px; padding:0px;
 display: inline-block;
 
 padding: 10px 20px;
 background-color: #38c172;
 color: #fff;
 border-radius: 5px;
 
 text-align: center;
 text-decoration: none;
 font-size: 2vmax;
 
 cursor: pointer;
 transition: all 0.3s ease;
 /* center */
 position: relative;
 left: 10vw;
 margin:2vw;
 
 
 
 
 }
 
 .section-button:hover {
 background: #555;
 }
 
 
 </style>
 
 <script>
 
 
 $(document).ready(function(){
 $('#message-add').hide();
 
 $('.message-add-showhide').click(function(){
 /* if it has class 'showing' then remove class 'showing' */
 /* slide down if not showing */
 if($('#message-add').hasClass('showing'))
 {
 $('#message-add').removeClass('showing');
 $('#message-add').slideUp();
 }
 else
 {
 $('#message-add').addClass('showing');
 $('#message-add').slideDown();
 }
 
 
 });
 });
 </script>
 <div class='section-button-wrapper showhide-wrapper'>
 <div class='section-button message-add-showhide'>show/hide add message</div>
 </div>
 
 <div id="message-add">
 <form id="message-add-form" action="javascript:void(0);" method="post">
 <div class='message-add-form'>
 
 <div class='message-add-form-row'>
 <div class='message-add-form-label'>Email</div>
 <div class='message-add-form-input'><input type="text" name="email" placeholder="email" /></div>
 </div>
 
 <div class='message-add-form-row'>
 <div class='message-add-form-label'>IP</div>
 <div class='message-add-form-input'><input  type="text" name="ip" placeholder="ip" /></div>
 </div>
 
 <div class='message-add-form-row'>
 <div class='message-add-form-label'>Subject</div>
 <div class='message-add-form-input'><input type="text" name="subject" placeholder="subject" /></div>
 </div>
 
 <div class='message-add-form-row'>
 <div class='message-add-form-label'>Message</div>
 <div class='message-add-form-input'><textarea name="message" placeholder="message"></textarea></div>
 </div>
 
 <div class='message-add-form-row'>
 <div class='message-add-form-label'></div>
 <div class='message-add-form-input'><input class='btn btn-submit' type="submit" value="Add Message" /></div>
 </div>
 
 </div>
 
 </form>
 </div>
 
 
 <style>
 
 
 /* CSS for the message-add form */
 
 #message-add {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 70vh;
 background-color: #d8f3dc;
 
 }
 
 .message-add-form {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 2rem;
 border-radius: 1rem;
 background-color: #fff;
 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
 max-width: 90%;
 width: 30rem;
 }
 
 .message-add-form-row {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 margin: 0.5rem 0;
 width: 100%;
 }
 
 .message-add-form-label {
 font-size: 1.2rem;
 font-weight: bold;
 color: #226a51;
 flex: 0.3;
 }
 
 .message-add-form-input {
 flex: 0.7;
 }
 
 .message-add-form input[type="text"],
 .message-add-form textarea {
 font-size: 1.2rem;
 padding: 0.5rem;
 border: none;
 border-radius: 0.5rem;
 background-color: #e2f0d9;
 width: 100%;
 transition: background-color 0.2s ease-in-out;
 color: #226a51;
 }
 
 .message-add-form input[type="text"]:focus,
 .message-add-form textarea:focus {
 outline: none;
 background-color: #cfe5ce;
 }
 
 .message-add-form input[type="submit"] {
 font-size: 1.2rem;
 font-weight: bold;
 color: #fff;
 background-color: #4b8e74;
 border: none;
 border-radius: 0.5rem;
 padding: 0.5rem 1rem;
 margin-top: 1rem;
 cursor: pointer;
 transition: background-color 0.2s ease-in-out;
 }
 
 .message-add-form input[type="submit"]:hover {
 background-color: #3a6e5a;
 }
 
 /* Responsive CSS for the message-add form */
 
 @media screen and (max-width: 1024px) {
 .message-add-form {
 max-width: 100%;
 width: 90%;
 }
 
 .message-add-form-label {
 font-size: 1rem;
 flex: 0.4;
 }
 
 .message-add-form-input {
 flex: 0.6;
 }
 }
 
 </style>
 
 <div class='section-button-wrapper btn-update-list-wrapper'>
 <div class='section-button btn-update-list'>Refresh List</div>
 </div>
 
 
 
 
 <div id="messages-list" class='messages-list'>
 <?php
 
 // echo show_messages_list($cform->get_messages());
 ?>
 
 </div>
 <script>
 $(function() {
 var send_data = {};
 var url = "example.php_sqlite3_contact_form.php?&ajax=messages_get";
 do_cmd_post(url, send_data);
 }); // end document ready
 </script>
 
 <script>
 
 $(document).ready(function() {
 
 // hide update section
 
 // add message
 $('#message-add-form').submit(function() {
 // disable .message-add-form .btn-submit
 $('.message-add-form .btn-submit').attr('disabled', 'disabled');
 
 var email = $('input[name=email]').val();
 var subject = $('input[name=subject]').val();
 var message = $('textarea[name=message]').val();
 var ip = $('input[name=ip]').val();
 
 var send_data = {};
 send_data['email'] = email;
 send_data['subject'] = subject;
 send_data['message'] = message;
 send_data['ip'] = ip;
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=message_add";
 do_cmd_post(url, send_data);
 
 });
 
 $(document).on('click', '.btn-update-message', function() {
 
 // get the data
 var id = $(this).parent().parent().find('input[name=id]').val();
 var email = $(this).parent().parent().find('input[name=email]').val();
 var subject = $(this).parent().parent().find('input[name=subject]').val();
 var message = $(this).parent().parent().find('textarea[name=message]').val();
 var ip = $(this).parent().parent().find('input[name=ip]').val();
 
 
 var send_data = {};
 send_data['id'] = id;
 send_data['email'] = email;
 send_data['subject'] = subject;
 send_data['message'] = message;
 send_data['ip'] = ip;
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=message_update";
 do_cmd_post(url, send_data);
 });
 
 
 // update list
 $('.btn-update-list').click(function() {
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=messages_get";
 do_cmd_post(url, {});
 
 });
 
 // reset message (reload)
 $(document).on('click', '.btn-reset-message', function() {
 id = $(this).parent().parent().find('input[name=id]').val();
 var url = "example.php_sqlite3_contact_form.php?&ajax=message_get";
 do_cmd_post(url, {id: id});
 
 
 });
 
 // delete message
 // handle even on dynamic loaded elements
 $(document).on('click', '.btn-delete-message', function() {
 
 var id = $(this).parent().parent().find('input[name=id]').val();
 
 var send_data = {};
 send_data['id'] = id;
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=message_delete";
 do_cmd_post(url, send_data);
 
 }); // end btn-delete-message click
 
 // ban ip
 $(document).on('click', '.btn-ban-ip', function() {
 // button has a  data-ip= attribute
 var ip = $(this).attr('data-ip');
 
 var send_data = {};
 send_data['ip'] = ip;
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=ip_ban";
 do_cmd_post(url, send_data);
 }); // end btn-ban-ip click
 
 // unban ip
 $(document).on('click', '.btn-unban-ip', function() {
 // button has a  data-ip= attribute
 var ip = $(this).attr('data-ip');
 
 var send_data = {};
 send_data['ip'] = ip;
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=ip_unban";
 do_cmd_post(url, send_data);
 }); // end btn-unban-ip click
 
 }); // end document ready
 
 </script>
 
 
 
 <style>
 .btn {
 display: inline-block;
 padding: 10px;
 background: #ccc;
 cursor: pointer;
 
 }
 
 .btn:hover {
 background: #ddd;
 }
 
 
 #messages-list {
 margin-bottom: 20px;
 
 }
 
 
 
 </style>
 
 
 
 
 <style>
 /* Messages List */
 #messages-list {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 
 }
 
 .message {
 position:relative;
 background-color: #fff;
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 border-radius: 5px;
 padding: 20px;
 margin: 20px;
 width:30vw;
 min-width:400px;
 box-sizing: border-box;
 color: #333;
 font-size: 16px;
 }
 
 .message.editing {
 background-color: red;
 }
 
 
 /* if the screen is smaller than 768px, make the message 100% width */
 @media screen and (max-width: 1400px) {
 .message {
 width: 100%;
 }
 }
 
 
 
 .message:hover {
 transform: translateY(-5px);
 transition: all 0.3s ease;
 cursor: pointer;
 }
 
 .message .fld {
 margin-bottom: 10px;
 }
 
 .message input[type="text"],
 .message textarea {
 padding: 10px;
 border: none;
 border-radius: 5px;
 background-color: #f5f5f5;
 width: 100%;
 font-size: 16px;
 color: #333;
 }
 
 .message input[type="text"]:focus,
 .message textarea:focus {
 outline: none;
 background-color: #fff;
 }
 
 .message input[type="text"][readonly] {
 background-color: #d9d9d9;
 }
 
 .message div.fldbtn {
 position:relative;
 padding:0px;margin:0px;
 
 display:inline-block;
 
 color: #fff;
 text-align: center;
 text-decoration: none;
 font-size: 16px;
 cursor: pointer;
 transition: all 0.3s ease;
 
 
 
 
 
 }
 .message .btn {
 display:block;
 margin:0px;
 position:relative;
 
 background-color: #38c172;
 color: #fff;
 
 
 border-radius: 5px;
 
 text-align: center;
 text-decoration: none;
 font-size: 16px;
 
 cursor: pointer;
 transition: all 0.3s ease;
 /* set flex size to about 30% */
 
 font-size:2vmax;
 width:7.4vw;
 min-width:100px;
 
 margin:0.2vw;
 padding:0.3vw;
 
 }
 
 .message .btn:hover {
 background-color: #2f855a;
 }
 
 .message .btn-delete-message {
 background-color: #e53e3e;
 }
 
 .message .btn-delete-message:hover {
 background-color: #c53030;
 }
 
 .message .btn-update-message {
 background-color: #4299e1;
 }
 
 .message .btn-update-message:hover {
 background-color: #3182ce;
 }
 
 
 .message .btn-reset-message {
 background-color: #ed8936;
 }
 
 .message .btn-reset-message:hover {
 background-color: #dd6b20;
 }
 
 
 </style>
 
 
 <style>
 /* hide .def-hide by default for jQuery to show with a show() function */
 .message .def-hide {
 display:none;
 }
 
 
 
 </style>
 
 
 
 <!-- show and handle banned list -->
 <div class='banned-list'>banned list</div>
 <script>
 // document ready
 $(function() {
 
 var send_data = {};
 
 var url = "example.php_sqlite3_contact_form.php?&ajax=load_banned";
 do_cmd_post(url, send_data);
 
 }); // end document ready
 </script>
 
 <style>
 .banned-list {
 /* flex */
 display:flex;
 flex-direction:column;
 justify-content:flex-start;
 align-items:flex-start;
 padding:2vw;
 
 }
 .banned-list .banned-header {
 font-size:2vmax;
 font-weight:bold;
 margin-bottom:10px;
 }
 
 .banned-list .ip-row {
 display:block;
 padding:2vw;
 }
 
 .banned-list .ip-row .fld {
 display:inline-block;
 width:25vw;
 }
 
 </style>
 </body>
 </html>
 |