Slider Using PHP, Ajax And Javascript

Advertisement

Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy.Here is the post for you in which I’ve implemented javascript slider to work in Ajax using PHP. Ok let’s Begin it by creating the following tables in the database. Here is the mysql code to create the table named “tbl_slider” in database.

CREATE TABLE `tbl_slider` (
  `id` smallint(6) NOT NULL auto_increment,
  `slider_val` smallint(6) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

VIEW DEMO
DOWNLOAD SOURCE CODE

And now, there is a file slider.js which contains the code of javascript for the slider. I would like to say thanks to Tom Hermansson Snickars for the slider script. The main line you’ve notice in the slider.js is 164 where I’ve place the following code to call the Ajax function which is called when the slider is released after moving i.e on “onMouseUp” event.

setSliderVal(document.getElementById('slider1').style.left);

Slider1 is the if Division(div) which is available in the index.php file. The following code displays the slider in the index.php file.

<DIV class=carpe_slider_group>
 <DIV class=carpe_horizontal_slider_display_combo>
  <DIV class=carpe_slider_display_holder>
   <!-- Default value: 0 -->
   <input name="Input" class=carpe_slider_display id="display1" alue="<?=$row['slider_val']?>" />
  </DIV>
 <DIV class=carpe_horizontal_slider_track>
 <DIV class=carpe_slider_slit></DIV>
 <DIV class=carpe_slider id=slider1 display="display1" tyle="left:<?=$row['slider_val']?>px"></DIV>
</DIV>
</DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
</DIV>

As you can see above there is “<?=$row['slider_val']?>” which is value of the slider stored in the database, the code for retrieving value from database look like this you can find this code in the index.php file

$link = mysql_connect('localhost', 'root', ''); //change the configuration if required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if equired
$query="SELECT slider_val FROM  tbl_slider WHERE id='1'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);

And in the index.php there is Ajax function called “setSliderVal()” which is called from silder.js and use the ajax to call AJAX4Slider.php and retrive the current value of the slider from database.Here is the code of the AJAX4Slider.php

$sliderval=$_GET['sliderval']; //get the value from ajax function
$link = mysql_connect('localhost', 'root', ''); //change the onfiguration in required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if required
$query="UPDATE tbl_slider SET slider_val='$sliderval' WHERE id='1'";
$result=mysql_query($query);

The above code saves the value of the slider to the database.

VIEW DEMO
DOWNLOAD SOURCE CODE

Security Note : It is just a simple demo and If you want to use this code in your professional project then there is a security issue in the PHP code, please use $sliderval=intval($_GET['sliderval']); in the php code instead of $sliderval=$_GET['sliderval']; in the AJAX4Slider.php to prevent your site from sql injection attack.

Popularity: 18% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

Related Posts

» This blog’s Code and content is stolen – Please help
» jQuery is the most popular JavaScript and Ajax Framework
» Which is the best JavaScript and Ajax Framework ?
» About Me

69 Comments on “Slider Using PHP, Ajax And Javascript”

  • fedmich wrote on 14 January, 2008, 2:05

    cool, but I prefer the jQuery slider plugin…
    have you seen the shopify.com ‘s slider, two controls for MINIMUM and MAXIMUM values

  • Staxitix wrote on 16 January, 2008, 4:22

    Hey, that’s a very cool little widget there. Of course, it needs some sort of design applied to it, but I can find lots of uses for it.

  • Kim Smith wrote on 19 January, 2008, 12:05

    Hey!…Thanks for the nice read, keep up the interesting posts..

  • Alex93053 wrote on 21 February, 2008, 12:52

    I keep on getting the “req is not defined” error:

    req is not defined
    onreadystatechange()ajaxslider (line 27)
    (no name)(XMLHttpRequest, null)javascript: eval(… (line 1)
    setSliderVal(“47px”)ajaxslider (line 37)
    sliderMouseUp()slider.js (line 164)
    [Break on this error] if (req.readyState

    any idea where to define that?

  • Danthehat wrote on 22 February, 2008, 22:34

    Although it is pretty cool to have a slider hooked right into the database like that… is it really necessary? I mean, if you need the value associated with something other than a slider… say a number of orders or something–well then you’d have redundant data in your database: one value in your slider table and one in your order table.

    It makes much more sense to have those values stored at runtime.

  • ronald wrote on 7 April, 2008, 16:43

    Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘roshan_usrtest’@'localhost’ (using password: YES)
    Could not connect: Access denied for user ‘roshan_usrtest’@'localhost’ (using password: YES)

  • Roshan wrote on 8 April, 2008, 8:35

    Ronald…….thanks for heads up….it was due to server change in last month and now i’ve fixed it..

  • Adam wrote on 17 October, 2008, 14:25

    Nice injection attack there.

    If you have this:

    $query=”UPDATE tbl_slider SET slider_val=’$sliderval’ WHERE id=’1′”;

    Then what if I pass the URL, manually:

    ?sliderval=A

    The script will crash. What if I pass

    ?sliderval=1′; TRUNCATE tbl_slider; DROP tbl_slider;

    On some databases, I’ve just nuked your database.

    Try this on index.php:

    $sliderval=(int) $_GET['sliderval']; //get the value from ajax function

  • Roshan wrote on 19 October, 2008, 10:45

    @adam- you’re right and I was already aware of it and added a security note below but when magic quote is on sql injection attack is almost not possible…

  • M.Dubb wrote on 2 December, 2008, 16:07

    I thought about it and can’t seem to come up with a valuable idea as to why I would need a slider. Why would anyone need a slider?

    I see the code but don’t see the design and or idea.
    What could a slider do for me?

    Cheers

  • Kevin wrote on 3 December, 2008, 12:33

    Your ajax request gives an error. If u use an other request the error won’t display. So u don’t get the annoying javascript error at the bottom..
    thanks for the script though!

  • Cristian wrote on 20 February, 2009, 19:45

    10+ Excellent Examples of Sliders in Ajax, Javascript and PHP
    http://www.navioo.com/javascript/dhtml/GUI_Components_227.dhtml

  • Cheeray wrote on 23 February, 2009, 23:16

    Thanks for the nice article, very useful, very neat, yet very plain to read for a non-english speaker like me.

  • daft01 wrote on 27 April, 2009, 12:06

    you should really enhanced your code presentation dude.

  • andy Peacock wrote on 21 January, 2010, 20:43

    Thanks for the tutorial. Is there any way to make the number update in real time on a remote instance when the database number changes?

  • ?? ???????? wrote on 27 February, 2010, 20:52

    I think it is nice tutorial

  • Raj wrote on 25 March, 2010, 13:07

    Thanks for this beautiful script.
    Really nice script

  • Saira wrote on 30 April, 2010, 6:28

    Excellent Examples of Sliders in Ajax, Javascript and PHP

    http://www.tutorials99.com

    Hope it’s helpful!

  • Conixit wrote on 27 May, 2010, 22:44

    This works really well. I intend to use it as a percent complete on a task list. However the increment of “1″ is too small. I would like to see increments of 10, ie 10% 20% 30% 40% etc ..Possible?

  • php techie wrote on 22 June, 2010, 8:51

    This is a nice article. Its easy to understand and implemented to this. I like to your article.
    Thanks:-)

Trackbacks

  1. Caminews » http://roshanbh.com.np/2008/01/slider-using-php-ajax-and-javascript.html
  2. napyfab:blog» Blog Archive » links for 2008-01-14
  3. Slider in Ajax, Javascript and PHP
  4. My content is stolen over ajaxprojects.com - Please help
  5. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars
  6. 30? Ajax/Javscript ???, ????????? | ????
  7. 50 Excellent AJAX Tutorials | Tutorials | Smashing Magazine
  8. Useful AJAX Tutorials | Neurosoftware web dev
  9. 50 Excellent AJAX Tutorials | POLPDESIGN
  10. 50 Excellent AJAX Tutorials | Web Burning Blog
  11. 50+ Great Ajax Tutorial | Tech User, Blogger and Designers References
  12. 50 Excellent AJAX Tutorials | Evolution : weblog
  13. 50 Excellent AJAX Tutorials | How2Pc
  14. 50 Excellent AJAX Tutorials « Rohit Dubal
  15. Best Ajax Tutorials and Dynamic Solution for PHP ,Asp.net,Ruby On Rails | Click On Tech
  16. 30? Ajax/Javscript ???, ????????? | forcto.com
  17. 150 AJAX Tutorials » TemplateLite.com
  18. Best of 158 Ajax Framework,JavaScript Libraries and Toolkit Tutorials | Click On Tech
  19. Ajax Frameworks,JavaScript Libraries and Toolkit Tutorials | Dev Techie
  20. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars | YABIBO.COM - YOUR WEB WORLD
  21. 30? Ajax/Javscript ???, ????????? | ????
  22. 50 Excellent AJAX Tutorials | 9Tricks.Com - Tips - Tricks - Tutorials
  23. 55 Awesome PHP Tutorials for Noobs — ProgrammerFish - Everything that's programmed!
  24. 55 ??????? PHP ???? ???? ??? ?? « ?????? ????? ????? ?? ???? ? ?????? ????? ? ??? ??
  25. pligg.com
  26. 100 Essential Web Development Tools - Noupe
  27. 100 Essential Web Development Tools | The circuits of imagination
  28. 100 Essential Web Development Tools | Best Web Magazine
  29. 100 Essential Web Development Tools | Yooxe
  30. 100 Essential Web Development Tools » Shai Perednik.com
  31. Web Development Tools - www.taufiqhs.com
  32. [?]Web ?????????????? | G.
  33. Web?????????????? | ????
  34. Web ??????????? - ??????
  35. Web ?????????????? « ???????
  36. Web ?????????????? | Crow
  37. Web ?????????????? « ??
  38. ??????-Web????? « web????
  39. 100 Essential Web Development Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
  40. Will Chou's Blog » Web?????????????????
  41. Web ??????????? | Haozi's Blog
  42. Web ?????????????? « ?????
  43. 100 Essential Web Development Tools | Afif Fattouh - Web Specialist
  44. Web?????????????? - ??????
  45. Web ??????????? - ???????????? – ??? -
  46. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars | amitkosti.name
  47. Web ??????????? : : Full House
  48. Web ?????????????? | MJsee
  49. 30+ Javascript / Ajax Techniques for Sliders, Scrollers and Scrollbars | Information Square

Write a Comment

 


Copyright © 2013 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.