<?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>
|
Download
