I am making a chat box in codeigniter, but after enter the name and message, pop up box is coming showing 'Forbidden'.
I am really confused what I put instead shout.php here(chatbox.php')
$.post('shout.php', load_data, function(data) {
instead of 'shout.php' I put http://localhost/myfoldername/application/views/shout.php
my controller
money_c
function chat(){
$this->load->view('chatbox');
}
chatbox.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Box</title>
<style type="text/css">
<!--
.shout_box {
background: #627BAE;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 20%;
z-index:9;
}
.shout_box .header .close_btn {
background: url(images/close_btn.png) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -16px;
}
.shout_box .header .open_btn {
background: url(images/close_btn.png) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(images/close_btn.png) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #627BAE;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
-->
</style>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
$.post('shout.php', load_data, function(data) {
$('.message_box').html(data);
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
});
}, 1000);
//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {
var iusername = $('#shout_username').val();
var imessage = $('#shout_message').val();
post_data = {'username':iusername, 'message':imessage};
//send data to "shout.php" using jQuery $.post()
$.post('shout.php', post_data, function(data) {
//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();
//keep scrolled to bottom of chat!
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
//reset value of message box
$('#shout_message').val('');
}).fail(function(err) {
//alert HTTP server error
alert(err.statusText);
});
}
});
//toggle hide/show shout box
$(".close_btn").click(function (e) {
//get CSS display state of .toggle_chat element
var toggleState = $('.toggle_chat').css('display');
//toggle show/hide chat box
$('.toggle_chat').slideToggle();
//use toggleState var to change close/open icon image
if(toggleState == 'block')
{
$(".header div").attr('class', 'open_btn');
}else{
$(".header div").attr('class', 'close_btn');
}
});
});
</script>
</head>
<body>
<div class="shout_box">
<div class="header">chat box<div class="close_btn"> </div></div>
<div class="toggle_chat">
<div class="message_box">
</div>
<div class="user_info">
<input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />
<input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />
</div>
</div>
</div>
</body>
</html>
shout.php
<?php
####### db config ##########
$db_username = 'root';
$db_password = '';
$db_name = 'money1';
$db_host = 'localhost';
####### db config end ##########
if($_POST)
{
//connect to mysql db
$sql_con = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
die();
}
if(isset($_POST["message"]) && strlen($_POST["message"])>0)
{
//sanitize user name and message received from chat box
//You can replace username with registerd username, if only registered users are allowed.
$username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
$message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
$user_ip = $_SERVER['REMOTE_ADDR'];
//insert new message in db
if(mysqli_query($sql_con,"INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))
{
$msg_time = date('h:i A M d',time()); // current time
echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';
}
// delete all records except last 10, if you don't want to grow your db size!
mysqli_query($sql_con,"DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)");
}
elseif($_POST["fetch"]==1)
{
$results = mysqli_query($sql_con,"SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC");
while($row = mysqli_fetch_array($results))
{
$msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time
echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>';
}
}
else
{
header('HTTP/1.1 500 Are you kiddin me?');
exit();
}
}
but after entering name and message alert box will pop up showing 'Forbidden'.
I don't think you fully grasp MVC architecture and this is not really the place to explain it.
I suggest you study it more but what may work for you here is to modify your controller function to this:
function chat(){
$this->load->view('chatbox');
}
function shout(){
$this->load->view('shout');
}
You would then need to ensure that the URL(route) works.
Assume you current URL is www.mysite.com/someController/chat/
then the new URL would be www.mysite.com/someController/shout/
If this URL does not work then you would need to sort out your route to make it work.
If this URL works, then you need to update your JQuery URL from
.post('shout.php', load_data, function(data) {
to
.post('/someController/shout/', load_data, function(data) {
TL;DR
The jquery post function accesses the fule via the URL like a real person. It cannot load the file directly.
Related
My blade view shows a empty page, but if I press CTRL + U to show the source code, then I get this:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://localhost/portal_testing/public/css/style.css'/>
<script src='http://localhost/portal_testing/public/js/main.js'/>
</head>
<body>
<div>
<div class='infoBox'>
<h4 class='infoBoxTitle'>Log:</h4>
<div class='infoBoxContent'>
<p>test</p>
</div>
</div>
<div class='errorBox'>
<h4 class='errorBoxTitle'>Error Log:</h4>
<div class='errorBoxContent'>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
Why is it not rendering even though there is valid code?
UPDATE:
Javascript:
//Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
CSS
.infoBox {
font-family: arial;
padding:2px;
background-color: #DADADA;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.infoBoxTitle {
padding:4px;
font-size: 13px;
color: red;
margin: 1px;
text-decoration: underline;
}
.infoBoxContent {
font-size: 10px;
padding-left:5px;
margin-left:10px;
border: 1px solid gray;
}
.errorBox {
font-family: arial;
padding:2px;
background-color: #838383;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.errorBoxTitle {
padding:4px;
font-family: calibry;
font-size: 13px;
color: white;
margin: 1px;
text-decoration: underline;
}
.errorBoxContent {
color: white;
font-size: 11px;
padding-left:5px;
margin-left:10px;
border: 4px solid white;
}
I found the problem...
I noticed that all the content was rendered inside of the script tag:
The reason is, becaues the script element was missing it's closing tag.
Fix:
<script type="text/javascript" src='{{ URL::asset("js/main.js") }}'></script>
With help from some of you guys, I managed to partially get the functionality I wanted. Now I'm stuck again, and I'd need some more help.
Check the live version here, the code is below. What I need is:
-
Figure out how to switch to the next/previous product on both sides of the screen with a single click of the arrows. The left side works as expected, the right one doesn't switch in any case.
-
Make the results of slika1, slika2 and slika3 (they contain the filenames of three separate images) on the right side display as links that will switch the image on the left side.
-
Modify the code to prevent SQL injection attacks (optional at the moment, but it would be welcome)
I'm pretty sure the whole functionality could be contained in a single file to be called with POST, but I'm really not sure how to do it properly. That would be a bonus too!
Here's my code:
HTML (index.php):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="layout.css">
<link href='https://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post( "art.php", { pic: "1"}, function( data ) {
$("#picture").html( data );
});
$.post( "info.php", { id: "1"}, function( data ) {
$("#info").html( data );
});
$("#picture").on("click",".get_pic", function(e){
var picture_id = $(this).attr('data-id');
$("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "art.php", { pic: picture_id}, function( data ) {
$("#picture").html( data );
});
return false;
});
$("#info").on("click",".get_info", function(e){
var info_id = $(this).attr('data-id');
$("#info").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "info.php", { pic: info_id}, function( data ) {
$("#info").html( data );
});
return false;
});
});
</script>
<title>2199</title>
</head>
<body>
<div class="navbar-wrapper">
<div class="container"> <img src="logo.png" class="boxy"> </div>
</div>
<div class="jumbotron special">
<div id="picture" align="center"> </div>
</div>
<div class="jumbotron special2">
<div id="info" align="center"> </div>
</div>
</body>
</html>
HTML (art.php):
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["pic"]) && is_numeric($_POST["pic"]))
{
$current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_picture=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object();
if($result){
$next_id = $result->id;
}
//get previous picture id
$result = $mysqli->query("SELECT id FROM gola WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object();
if($result){
$prev_id = $result->id;
}
//get details of current from database
$result = $mysqli->query("SELECT artikel, slika1 FROM gola WHERE id = $current_picture LIMIT 1")->fetch_object();
if($result){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz"></span>':'';
//output html
echo '<div class="prod_img" style="background-image: url(pictures/';
echo $result->slika1;
echo '); background-size: contain; background-repeat: no-repeat; background-position: center center;">';
echo '<h3>';
echo $prev_button;
echo $result->artikel;
echo $next_button;
echo '</h3>';
echo '</div>';
}
HTML (info.php):
<?php
$username = "root"; //mysql username
$password = ""; //mysql password
$hostname = "localhost"; //hostname
$databasename = '2199'; //databasename
//get pic id from ajax request
if(isset($_POST["info"]) && is_numeric($_POST["info"]))
{
$current_info = filter_var($_POST["info"], FILTER_SANITIZE_NUMBER_INT);
}else{
$current_info=1;
}
//Connect to Database
$mysqli = new mysqli($hostname, $username, $password, $databasename);
if ($mysqli->connect_error){
die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
//get next picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id > $current_info ORDER BY id ASC LIMIT 1")->fetch_object();
if($result2){
$next_id = $result2->id;
}
//get previous picture id
$result2 = $mysqli->query("SELECT id FROM gola WHERE id < $current_info ORDER BY id DESC LIMIT 1")->fetch_object();
if($result2){
$prev_id = $result2->id;
}
//get details of current from database
$result2 = $mysqli->query("SELECT artikel, slika1, slika2, slika3, dim1, dim2, dim3, obdelava, dodatno FROM gola WHERE id = $current_info LIMIT 1")->fetch_object();
if($result2){
//construct next/previous button
$prev_button = (isset($prev_id) && $prev_id>0)?'<span class="glyphicon glyphicon-circle-arrow-left rujz-wht"></span>':'';
$next_button = (isset($next_id) && $next_id>0)?'<span class="glyphicon glyphicon-circle-arrow-right rujz-wht"></span>':'';
//output html
echo '<div class="info">';
echo '<h3 style="color: #fff !important;">';
echo $prev_button;
echo $result2->artikel;
echo $next_button;
echo '</h3>';
echo '<br />';
echo '<p>';
echo $result2->slika1;
echo '<br />';
echo $result2->slika2;
echo '<br />';
echo $result2->slika3;
echo '<br />';
echo $result2->dim1;
echo '<br />';
echo $result2->dim2;
echo '<br />';
echo $result2->dim3;
echo '<br />';
echo $result2->obdelava;
echo '<br />';
echo $result2->dodatno;
echo '</p>';
echo '</div>';
}
CSS:
html, body {
height: 100%;
background-color: #fff;
font-size: 62.5%;
}
.special, .special .jumbotron {
height: 100%;
background-color: white;
border: 0px solid red;
margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
height: 100%;
background-color: #62a70f;
border: 0.5rem solid #fff;
border-radius: 3rem;
margin-bottom: 0px !important;
padding: 1rem;
}
.logo {
border: 1px solid red;
width: 10%;
min-height: 100%;
position: relative;
height: 100%;
}
#picture {
border: 0px red solid;
height: 100%;
background: #fff;
}
.prod_img {
height: 100%;
}
h3 {
font-family: 'Syncopate', sans-serif;
font-size: 24px;
font-size: 2.4rem;
color: #62a70f;
}
.boxy {
border: 0.5rem solid white;
position: fixed;
bottom: 2.5%;
right: 5%;
width: 25%;
padding: 1rem;
/* height: 30rem;*/
background-color: rgba(64,64,64,1);
border-radius: 3rem;/* background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;*/
}
#media (min-width:768px) {
.boxy {
border: 0.5rem solid white;
position: fixed;
bottom: 5%;
right: 45%;
width: 10%;
/* height: 30rem;*/
background-color: rgba(64,64,64,1);
border-radius: 3rem;/* background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;*/
}
.navbar {
min-height: 10% !important;
max-height: 10% !important;
height: 10%;
background-image: url(logo.png);
background-size: contain;
background-repeat: no-repeat;
border: 0px solid green;
background-color: #0e0e0e;
animation-name: example;
animation-duration: 1s;
animation-timing-function: ease;
}
.navbar-header {
border: 0px solid green;
min-height: 100%;
}
.logo {
visibility: collapse;
}
.special, .special .jumbotron {
width: 50%;
float: left;
margin-bottom: 0px !important;
}
.special2, .special2 .jumbotron {
width: 50%;
float: left;
margin-bottom: 0px !important;
}
h3 {
font-size: 48px;
font-size: 4.8rem;
}
.rujz {
font-size: 36px;
font-size: 3.6rem;
color: #62a70f;
margin: 0.5em;
}
.rujz-wht {
font-size: 36px;
font-size: 3.6rem;
color: #fff;
margin: 0.5em;
}
}
#keyframes example {
0% {
bottom:-10%;
}
100% {
bottom:0%;
}
}
As always, thanks in advance!
i suggest using the carousel in bootstrap, since it's much better than what you are trying to achieve using Javascript.
Also, your MySQL queries can be shortened and changed into a more efficient code, by using a whileloop to output in to different sections.
But to not complicate things,
I assume that you are trying to get 2 different sections, one with a image and another with infomation? If so, you would want to cycle between 2 same slideshow with the same function. To do this,
<div id="Section1">Description</div>
<div id="Section1">slika1</div>
<div id="Shift"> Next </div>
and having a seperate javascript to cycle through each section
$(document).ready(function () {
$("#Section1").cycle();
$("#shift").click(function () {
$("#Section1").cycle('next');
});
});
a live example could be viewed here : http://jquery.malsup.com/cycle/pager11.html
edit: i wrote this entire answer without understanding your code.. so.. further clarifications could help :)
I wrote a PHP code for site backup and I am compressing the whole site and allowing the user to download it in his/her machine. The compression and download works fine but since it is a site backup, it is taking some time to zip and download and I don't want the user to navigate to any other page while the zip/download is in progress. Is there any way, I can show a progress bar while zip/download is in progress? I searched in google but it seems that you can show progress bar on upload but not while downloading.
I created a temp file before the zip actually takes place and did a check if the file exists. My logic was if the file exist then display a modal dialog in JS with "please wait.." message but since the download makes use of header, I cannot basically echo anything before download.
Any suggestions?
You can use a fake progress bar using a gif animation...
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var backup = document.getElementById("backup");
backup.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress"><img id="progress_image" src="css/progress_bar.gif" alt="BackUp in progress..."></div>
Here you can see my idea working... please click on BackUp button to test it...
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
.box {
padding: 20px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
text-align: center;
border: #C0C0C0 3px solid;
border-radius: 5px;
min-width: 270px;
height: 150px;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
}
.backup {
padding: 10px;
margin: 0 auto;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: darkviolet;
color: black;
border-radius: 5px;
border: #C0C0C0 3px solid;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
#progress {
padding: 20px;
}
.cleardiv {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BackUp Demo Progress Bar</title>
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var backup = document.getElementById("backup");
backup.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
</head>
<body>
<div class="box">
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress">
<img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="BackUp in progress...">
</div>
<div class="cleardiv"></div>
</div>
</body>
</html>
Then search a gif animation in order to display a progress bar...
Google + ajax + loader + gif
I hope this helps :)
i can not get my Login script to login... i have an index.php with a register form and a login form, the register form works perfectly, but it seems like the login form does not get the information from the database when you enter the "login" button, when logging in you is redirectet to "home.php" which wil show your username with help of sessions. but i get this error "Notice: Undefined variable: username in home.php on line 12"... I think its because its not logging in and the session gets an undefined variabel. I just cant find where the problem is
i have a database named "thesozializer"
and the sql for the table is:
CREATE TABLE IF NOT EXISTS users (
id int(11) NOT NULL,
username varchar(255) NOT NULL,
first_name varchar(255) NOT NULL,
last_name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(32) NOT NULL,
sign_up_date date NOT NULL,
activated enum('0','1') NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;
index.php looks like this:
<?php
mysql_connect("localhost","root","") or die("couldn't connect to database.");
mysql_select_db("thesocializer") or die("couldn't select database");
$reg = #$_POST['reg'];
//declaring variables to prevent errors
$fn = ""; //First Name
$ln = ""; //Last Name
$un = ""; //Username
$em = ""; //Email
$em2 = ""; //Email 2
$pswd = ""; //Password
$pswd2 = ""; // Password 2
$d = ""; // Sign up Date
$u_check = ""; // Check if username exists
//registration form
$fn = strip_tags(#$_POST['fname']);
$ln = strip_tags(#$_POST['lname']);
$un = strip_tags(#$_POST['username']);
$em = strip_tags(#$_POST['email']);
$em2 = strip_tags(#$_POST['email2']);
$pswd = strip_tags(#$_POST['password']);
$pswd2 = strip_tags(#$_POST['password2']);
$d = date("Y-m-d"); // Year - month - day
if ($reg) {
if ($em==$em2) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$un'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
//Check whether Email already exists in the database
$e_check = mysql_query("SELECT email FROM users WHERE email='$em'");
//Count the number of rows returned
$email_check = mysql_num_rows($e_check);
if ($check == 0) {
if ($email_check == 0) {
//check all of the fields have been filed in
if ($fn&&$ln&&$un&&$em&&$em2&&$pswd&&$pswd2) {
// check that passwords match
if ($pswd==$pswd2) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
echo "maximum length of username/first name/last name is 25 characters!";
}
else
{
// check the maximum length of password does not exceed 25 characters and is not less than 5 characters
if (strlen($pswd)>30||strlen($pswd)<5) {
echo "Password must be between 5 and 25 characters!";
}
else
{
//encrypt password and password 2 using md5 before sending to database
$pswd = md5($pswd);
$pswd2 = md5($pswd2);
$query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$em','$pswd','$d','0')");
die("<h2>welcome to The Socializer!</h2>Login to get started");
}
}
}
else {
echo "your passwords is incorrect";
}
}
else
{
echo "fill in all fields";
}
}
else
{
echo "email already in use";
}
}
else
{
echo "username already in use";
}
}
else {
echo "The emails is not alike!";
}
}
//User Login Code
if (isset($_POST["user_login"]) && isset($_POST["password_login"])) {
$user_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["user_login"]);
$password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]);
$password_login_md5 = md5($password_login);
$sql = mysql_query("SELECT id FROM users WHERE username='$user_login' AND password='$password_login_md5' LIMIT 1");
//Check for their existance
$userCount = mysql_num_rows($sql); //Count the number of rows returned
if ($userCount == 1) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["user_login"] = $user_login;
header("location: home.php");
exit();
}
else {
echo 'username or password is incorrect';
exit();
}
}
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
$username = $_SESSION["user_login"];
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#registrer-deg").click(function(){
$("#registrerdeg").show();
});
$("#registrer-deg").click(function(){
$("#logginn").hide();
});
$("#logg-inn").click(function(){
$("#logginn").show();
});
$("#logg-inn").click(function(){
$("#registrerdeg").hide();
});
});
</script>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>The Socializer</title>
</head>
<body>
<div id="sidebarLeft">
<div id="logo"></div>
<ul>
<li>Login</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="timeline">
<div id="registrering">
<form id="registrerdeg" action="index.php" method="POST" style="display: none;">
<input type="text" name="fname" size="10" placeholder="First name"><br/>
<input type="text" name="lname" size="10" placeholder="Last name"><br/>
<input type="text" name="username" size="10" placeholder="Username"><br/>
<input type="text" name="email" size="10" placeholder="Email"><br/>
<input type="text" name="email2" size="10" placeholder="Confirm email"><br/>
<input type="text" name="password" size="10" placeholder="Password"><br/>
<input type="text" name="password2" size="10" placeholder="Confirm Password"><br/>
<input type="submit" name="reg" value="Registrer!">
</form>
</div>
<div id="logg_inn">
<form id="logginn" action="index.php" method="POST" style="display: none;">
<input type="text" name="user_login" size="10" placeholder="Username"><br/>
<input type="text" name="password_login" size="10" placeholder="Password"><br/>
<input type="submit" name="login" value="Logg inn!">
</form>
</div>
</div>
</body>
</html>
* {
background-color: #2C3E50;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
color: #AFEEEE;
}
#sidebarLeft {
width: 220px;
height: 550px;
top: 0;
left: 0;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 50px;
position: fixed;
}
#sidebarRight {
width: 220px;
height: 550px;
right: 0;
top: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
position: fixed;
}
ul {
width: 220px;
list-style-type: none;
margin: 0px;
padding: 0;
margin-top: 30px;
}
li {
height: 35px;
width: 220px;
list-style-type: none;
margin: 5px;
}
#logo {
width: 150px;
height: 150px;
background-image: url("../img/logo.png");
-moz-border-radius: 75px;
-webkit-border-radius: 750px;
border-radius: 75px;
margin-left: 35px;
margin-top: 25px;
}
#sidebarLeft ul li a {
display: block;
width: 60px;
width: 220px;
height: 16px;
text-align: center;
margin-top: 9px;
text-decoration: none;
color: #AFEEEE;
}
#timeline {
width: 780px;
height: 550px;
margin-top: 50px;
margin-left: 240px;
top: 0;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 5px;
width: 200px;
height: 12px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
::-webkit-input-placeholder {
font-weight: normal;
}
:-moz-input-placeholder {
font-weight: normal;
}
::-moz-input-placeholder {
font-weight: normal;
}
:-ms-input-placeholder {
font-weight: normal;
}
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #61a6d4;
background: -webkit-gradient(linear, left top, left bottom, from(#316c94), to(#61a6d4));
background: -webkit-linear-gradient(top, #316c94, #61a6d4);
background: -moz-linear-gradient(top, #316c94, #61a6d4);
background: -ms-linear-gradient(top, #316c94, #61a6d4);
background: -o-linear-gradient(top, #316c94, #61a6d4);
padding: 5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #49718c;
background: #49718c;
color: #ccc;
}
input[type="submit"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
and home.php looks like this:
<?php
mysql_connect("localhost","root","") or die("couldn't connect to database.");
mysql_select_db("thesocializer") or die("couldn't select database");
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
$username = $_SESSION["user_login"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<title>The Socializer</title>
</head>
<body>
<div id="sidebarLeft">
<div id="logo">
</div>
<ul>
<li>Logg inn</li>
<li>Registrer deg</li>
<li>Om</li>
<li>Kontakt</li>
</ul>
</div>
<div id="timeline">
<?php echo "Hello, ".$username; ?>
</div>
</body>
</html>
* {
background-color: #2C3E50;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
color: #AFEEEE;
}
#sidebarLeft {
width: 220px;
height: 550px;
top: 0;
left: 0;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 50px;
position: fixed;
}
#sidebarRight {
width: 220px;
height: 550px;
right: 0;
top: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
position: fixed;
}
ul {
width: 220px;
list-style-type: none;
margin: 0px;
padding: 0;
margin-top: 30px;
}
li {
height: 35px;
width: 220px;
list-style-type: none;
margin: 5px;
}
#logo {
width: 150px;
height: 150px;
background-image: url("../img/logo.png");
-moz-border-radius: 75px;
-webkit-border-radius: 750px;
border-radius: 75px;
margin-left: 35px;
margin-top: 25px;
}
#sidebarLeft ul li a {
display: block;
width: 60px;
width: 220px;
height: 16px;
text-align: center;
margin-top: 9px;
text-decoration: none;
color: #AFEEEE;
}
#timeline {
width: 780px;
height: 550px;
margin-top: 50px;
margin-left: 240px;
top: 0;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 5px;
width: 200px;
height: 12px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
::-webkit-input-placeholder {
font-weight: normal;
}
:-moz-input-placeholder {
font-weight: normal;
}
::-moz-input-placeholder {
font-weight: normal;
}
:-ms-input-placeholder {
font-weight: normal;
}
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #61a6d4;
background: -webkit-gradient(linear, left top, left bottom, from(#316c94), to(#61a6d4));
background: -webkit-linear-gradient(top, #316c94, #61a6d4);
background: -moz-linear-gradient(top, #316c94, #61a6d4);
background: -ms-linear-gradient(top, #316c94, #61a6d4);
background: -o-linear-gradient(top, #316c94, #61a6d4);
padding: 5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #49718c;
background: #49718c;
color: #ccc;
}
input[type="submit"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
you have to move the session_start();
in both pages at the begin of your script.
index.php:
<?php
session_start();
mysql_connect("localhost","root","") or die("couldn't connect to database.");
...
home.php:
<?php
session_start();
mysql_connect("localhost","root","") or die("couldn't connect to database.");
...
I am made a instant search feature for my website as you can see here: harrisonbh.com/chatterr/instant_search/ but the search results just push down the content.
index.php
<html>
<head>
<title>Search Box</title>
<link rel="stylesheet" href="style.css"/>
<script src="../js/jquery-1.9.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<?php
//include 'connect.php';
include '../core/database/connect.php';
?>
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
Rest of content
</body>
</html>
index.js
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
} else {
$('#search_result').hide();
}
});
});
search.php
<?php
//include 'connect.php';
include '../core/database/connect.php';
$value = $_POST['value'];
$search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
while ($run = mysql_fetch_array($search_query)){
$username = $run['username'];
echo '<a href=#>'.$username.'</a><br/>';
}
?>
body{
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
}
input{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}
button{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #fff;
background:#4aaee7;
/*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/
}
button:hover{
background:#fff;
color: #333;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
cursor: pointer;
}
#search_result{
}
/*#search_result {
font-size: 12px;
padding: 5px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background: #fff;
color: #333;
position: absolute;
display: none;
}*/
a {
background:#4aaee7;
color: #fff;
text-decoration: none;
padding: 5px;
margin-top: 5px;
margin-bottom: -14px;
display: block;
}
a:hover{
background: #fff;
color: #4aaee7;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
padding: 5px;
}
I'm not sure if i should be using position: absolute; or what to fix this. What do you think that I should do? Thanks.
Just enclose you input text field and search button in <div style="float:left;">
I mean, like this:
<div style="float:left;">
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
</div>