Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Creating a Database with Javascript only,

    I need to create a database with JavaScript only, so no mySQL or PHP. I need to use JavaScript Array. I also need to use localStorage.setItem() to set each label and then add in information corresponding to that label.

    My database lay-out is pretty much like this:
    I have in the middle 4 fields:
    "First Name"
    "Last Name"
    "City"
    "ID"

    Beneath there are a few buttons
    "sort records"
    "show all record"
    "next record"
    "previous record"
    "new record"
    "save record"
    "Remove record"
    "Remove all records"

    If you click on the show all records button a table will appear right on top with the records you saved. So something like this:



    So let's say I open the page and I see those fields. I write Naruto, uzumaki, New york and save it. I want the ID to be automatically 1 already, and that I can not change the ID myself. But I don't want the text inside the text boxes to disappear after I saved it. And then I press on new, and when that happens the field will clear and the number inside the ID field will change into "2". Now I write Ichigo, Kurosaki, Amsterdam and save it.
    IF i'd press the show all record button now you'd see exactly the same as in the spoiler tag above. ( in the top right corner or somehting)

    And in the middle of the screen I still see the labels with field next to it, where the data of Ichigo is written. If I click previous record, you'll see Ichigo's data switching to NAruto's data, and see labels in the middle with fields next to it, where naruto's data is written. And if I click next record, I'll go to Ichigo's data.

    But let's say I added ichigo's data and naruto's data, but I want to change something to naruto's data, I go back to him, change some stuff and save it. I would like that the data also changes in the table of "show all records" And if I click remove record it will also be removed from the table.

    I already created the whole lay-out, I already created the buttons etc, but I don't know yet how to make the buttons actually work, and how to make the whole small searchable database work. So I only need to do the javascript part, and I hoped someone could help me with that, it would be appreciated.

    This is my html code:
    Code:
    <html>
    <head>
    
    <title>Database</title>
      <link rel="shortcut icon" href="db.ico" />
    
      
       <link rel="stylesheet" type="text/css" href="database.css" >
       
    <script type="text/javascript">
    ///////////////////////////////////////
    
    </script>
      </head>
      
    <body >
    
    
    <div class="three">
         <p align="middle"> 
         <font size="17,17" color="BLACK">
         <b> DATABASE </b> 
         </font>
         </p>  
     </div> 
     
    <DIV class="one" >   
    <DIV class="two" >   
    
    <form>
    
    <div class="seven">
         <p align="middle"> 
         <font size="6" color="BLACK">
         <b> First Name </b> 
         </font>
         </p>  
     </div> 
     
     <div class="eight">
         <p align="middle"> 
         <font size="6" color="BLACK">
         <b> Last Name </b> 
         </font>
         </p>  
     </div> 
     
     <div class="nine">
         <p align="middle"> 
         <font size="6" color="BLACK">
         <b> Birthplace </b> 
         </font>
         </p>  
     </div> 
     
     <div class="eleven">
         <p align="middle"> 
         <font size="6" color="BLACK">
         <b> UserID </b> 
         </font>
         </p>  
     </div> 
     
    <form>
     
    <input class="four" type="text"  name="firstname "><br>
    <input class="five" type="text" name="lastname"><br>
    <input class="six" type="text" name="birthplace"><br>
    <input class="ten" type="text" name="ID"><br>
    
    </form>
    
       <div id="footer">
    <p>Sort records
    </p>
       
       <div class="remove_1">
       
       <ul id="footer_remove"> 
        <img src="http://i.imgur.com/YMI6xmo.png" >
        <div id="footer_mini" >
        <div class="rtc">
        <p> Remove this record </p>
        </div>
        
        <div class="rac">
        <p> Remove all records </p>
        </div>
    </div>
    
        </ul>
        
        </div>
        
        <ul id="footer_save">
        <img src="http://i.imgur.com/LIVMTUZ.png">
        </ul>
        
        
        <ul  id="footer_next">
    
        <img type="button" class="footer_next" src="http://i.imgur.com/ZZhJWpK.png" >
        </ul>
        <ul  id="footer_new">
    
        <img type="button" class="footer_new" src="http://i.imgur.com/sSizCRs.png" >
        </ul>
        
        <ul  id="footer_prev">
    
        <img type="button" class="footer_prev" src="http://i.imgur.com/NnBXblZ.png" >
        </ul>
        
        <ul  id="footer_show">
    
        <img type="button" class="footer_show" src="http://i.imgur.com/wr0iJaW.png" >
        </ul>
        
        
            
       </div>
       
    
    
       
    </body>
         
    
    </html>

    This is my CSS code:
    Code:
    [removed by moderator upon request]
    someone gave me this code for local web storage. I need to combine this code with my database and the javascript stuff.
    Code:
    <!DOCTYPE html>
    <html>
    <title>Local Storage</title>
    
    <script>
    //////////////////////////////////////////////////////////////////////
    // Check browser support for local storage
    function fnStorage() {
    
    if(typeof(Storage)!=="undefined") {
    if (localStorage.wordCount !== "undefined") {
    localStorage.setItem('wordCount', Number(localStorage.getItem('wordCount'))+1);
    
    }
    else {
    localStorage.setItem('wordCount',1);
    }
    
    // Store the values with a key
    var i = localStorage.getItem('wordCount');
    var k = 'word' + i;
    var v = document.getElementById('word').value;
    localStorage.setItem(k, v);
    document.getElementById('word').value = "";
    document.getElementById('word').focus(); 
    }
    else{
    document.getElementById("result").innerHTML=
    "Sorry, your browser does not support Web Storage...";
    }
    }
    
    
    //shows all words in the storage
    function fnShowAll()
    {
    var k;
    if(localStorage.wordCount)
    {
    n = Number(localStorage.getItem('wordCount'));
    document.getElementById("result").innerHTML="There are "+n+ " Items in storage.";
    document.getElementById("result").innerHTML +="<br>";
    for(var i = 1; i <=n;i++)
    {
    k = 'word' + i;
    document.getElementById("result").innerHTML += localStorage.getItem(k);
    document.getElementById("result").innerHTML += "<br>";
    
    }
    }
    
    else alert("no words stored");
    }
    
    //removes all words in the storage
    function fnRemoveAll()
    {
    var i = localStorage.getItem('wordCount');
    for(var j=1;j<i;j++)
    localStorage.removeItem('word'+j);
    localStorage.removeItem('wordCount');
    document.getElementById("result").innerHTML = "";
    }
    
    </script>
    <body >
    <div id='myForm'>
    <form id="wordform" >
    <input id="word" name="word" type="text" value="" />
    <input id="add" type="button" onClick="fnStorage();" value="Add" />
    <input id="showWord" type="button" onClick="fnShowAll();" value = "Show all words" />
    <input id="removeWord" type="button" onClick="fnRemoveAll();" value = "Remove all words" />
    
    <script>
    document.getElementById('word').focus(); 
    </script>
    
    </form>
    </div>
    
    <div id="result">
    </div>
    
    </body>
    </html>
    So I pretty much only need the javascript stuff, but I really really need some help with that, could someone help me please? IT would be really appreciated!!
    Attached Thumbnails Attached Thumbnails Creating a Database with Javascript only,-afec525a9a9d7b6eb2318b3ed83a2c02.png  
    Last edited by VIPStephan; 04-06-2014 at 09:31 PM. Reason: removed CSS

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    So if you are not using mySQL database then what database are you proposing to use?

    JavaScript Storage has more in common with cookies than it does with a database. It is only accessibly to the individual visitor and cannot be shared between visitors.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just check the codes. Paste them in notepad and run it. You'll see the database and buttona, but I want the buttons actually have functions.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Why do you want to do this? An Excel speadsheet is the appropriate tool to use. There is no point in re-inventing the wheel.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    *sigh* i have my reasons. Once again. Javascript only!!!
    Is it that nobody is able to help me, or is it that nobody wants to help me??

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    It's more that you've been told that what you're trying to do is not appropriate for javascript. Like felgall said: "JavaScript Storage has more in common with cookies than it does with a database. It is only accessibly to the individual visitor and cannot be shared between visitors."

    if what you are proposing is a "personal" database that differs between every user that accesses your page and therefore contains information that doesn't need to be shared between users, you should make that clear and then maybe someone will see the point in trying to help you.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Khallil View Post
    *sigh* i have my reasons. Once again. Javascript only!!!
    Is it that nobody is able to help me, or is it that nobody wants to help me??
    With the informatiuon provided so far there are many far superior solutions that do not involve JavaScript - for example Philip's suggestion of using Excel.

    Until you provide a reason as to why a JavaScript solution is going to be more appropriate than the alternatives we do not really have enough information to work out what an appropriate JavaScript solution should contain. Until we can work that out there's no way to tell how close or far from that solution that your code is.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    not sure why everyone is attacking the messenger instead of answering the question, which isn't that complicated.
    are there more professtional or wide-sread ways of acoomplishing the goal? sure. But that doesn't mean that JS can't handle a little CRUD.
    it might be useful to run this type of application on any of the devices html5+js apps enjoy.

    i apologize on their behalf; they can be very helpful when they want to be, but i don't see that potential reflected by this thread.


    at any rate, it's simple to do this type of app these days.
    i didn't have time to really debug this, but you can load and cursor the demo data:

    Code:
    <html>
    <head>
    
    <title>Database</title>
      <link rel="shortcut icon" href="db.ico" />
    
      
       <link rel="stylesheet" type="text/css" href="database.css" >
       
    <script type="text/javascript">
    ///////////////////////////////////////
    
    </script>
      </head>
      
    <body >
    
    
    <div class="three">
    	 <p align="middle"> 
         <font size="17,17" color="BLACK">
         <b> DATABASE </b> 
         </font>
         </p>  
     </div> 
     
    <DIV class="one" >   
    <DIV class="two" >   
    
    <form>
    
    <div class="seven">
    	 <p align="middle"> 
         <font size="6" color="BLACK">
         <b> First Name </b> 
         </font>
         </p>  
     </div> 
     
     <div class="eight">
    	 <p align="middle"> 
         <font size="6" color="BLACK">
         <b> Last Name </b> 
         </font>
         </p>  
     </div> 
     
     <div class="nine">
    	 <p align="middle"> 
         <font size="6" color="BLACK">
         <b> Birthplace </b> 
         </font>
         </p>  
     </div> 
     
     <div class="eleven">
    	 <p align="middle"> 
         <font size="6" color="BLACK">
         <b> UserID </b> 
         </font>
         </p>  
     </div> 
     
    <form>
     
    <input class="four" type="text"  name="firstname"><br>
    <input class="five" type="text" name="lastname"><br>
    <input class="six" type="text" name="birthplace"><br>
    <input class="ten" type="text" name="ID"><br>
    
    </form>
    
       <div id="footer">
    <p>Sort records
    </p>
       
       <div class="remove_1">
       
       <ul id="footer_remove"> 
    	<img src="http://i.imgur.com/YMI6xmo.png" >
    	<div id="footer_mini" >
    	<div class="rtc">
    	<p onclick="remove()"> Remove this record </p>
    	</div>
    	
    	<div class="rac">
    	<p onclick="remove(true)"> Remove all records </p>
    	</div>
    </div>
    
    	</ul>
    	
    	</div>
    	
    	<ul id="footer_save">
    	<img src="http://i.imgur.com/LIVMTUZ.png" onclick="save()" >
    	</ul>
    	
    	
    	<ul  id="footer_next">
    
    	<img type="button" class="footer_next" src="http://i.imgur.com/ZZhJWpK.png" onclick="next()" >
    	</ul>
    	<ul  id="footer_new">
    
    	<img type="button" class="footer_new" src="http://i.imgur.com/sSizCRs.png" onclick="" >
    	</ul>
    	
    	<ul  id="footer_prev">
    
    	<img type="button" class="footer_prev" src="http://i.imgur.com/NnBXblZ.png" onclick="prev()" >
    	</ul>
    	
    	<ul  id="footer_show">
    
    	<img type="button" class="footer_show" src="http://i.imgur.com/wr0iJaW.png" onclick="remove()" >
    	</ul>
    	
    	
    		
       </div>
       
    
    <script>
    
    
    data=JSON.parse(localStorage.mydb || "0") || {
    	"1": {
    		"name": "John",
    		"last": "Smith",
    		"birth": "Seattle, WA",
    		"id": 1
    	},
    	"2": {
    		"name": "Kelly",
    		"last": "Ross",
    		"birth": "Dallas, TX",
    		"id": 2
    	},
    	"3": {
    		"name": "Jeff",
    		"last": "Stevenson",
    		"birth": "Washington, D.C.",
    		"id": 3
    	},
    	"4": {
    		"name": "Jennifer",
    		"last": "Gill",
    		"birth": "Seattle, WA",
    		"id": 4
    	},
    	"5": {
    		"name": "Bob",
    		"last": "Jones",
    		"birth": "St. Louis, MO",
    		"id": 5
    	},
    	"6": {
    		"name": "Jane",
    		"last": "Clinton",
    		"birth": "New York, NY",
    		"id": 6
    	},
    	"7": {
    		"name": "John",
    		"last": "Roberts",
    		"birth": "Oakland, CA",
    		"id": 7
    	},
    	"8": {
    		"name": "Sally",
    		"last": "Freer",
    		"birth": "Chicago, IL",
    		"id": 8
    	},
    	"9": {
    		"name": "Sam",
    		"last": "Sandburg",
    		"birth": "Miami, FL",
    		"id": 9
    	},
    	"10": {
    		"name": "Ross",
    		"last": "Edwards",
    		"birth": "Atlanta, GA",
    		"id": 10
    	}
    };
    
    index=0;
    
    
    
    function byName(name){return document.getElementsByName(name)[0];}
    
    function save(blnSilent){
      var branch={
        name: byName("firstname").value,
        last: byName("lastname").value,
        birth: byName("birthplace").value,
        id: byName("ID").value
      }
     
       if(!blnSilent){
        data[branch.ID]=branch;
      }
    
       render();
       localStorage.mydb=  JSON.stringify(data);
      
    }
    
    
    
    function draw(id){
      var that=data[id];
      if(!that) throw "not a valid ID: "+ id;
      byName("firstname").value= that.name;
      byName("lastname").value= that.last;
      byName("birthplace").value= that.birth;
      byName("ID").value= that.id;
      render();
    
    }
    
    function render(){
        document.title= "Viewing #"+index+" of " + Object.keys(data).length;
    }
    
    
    function next(){
       index++;
       var r=Object.keys(data),
       that=data[r[index]];
        if(!that){return;}
       draw(that.id);
    }
    
    
    
    function prev(){
       index--;
       var r=Object.keys(data),
       that=data[r[index]];
        if(!that){return;}
       draw(that.id);
       
    }
    
    
    
    
    
    function remove(all){
      if(all===true){data={}; save(true); }
      delete data[r[index]];
      save(true);
      render();
    }
    
    
    render();
    
    
    </script>
       
    </body>
    </html>
    i didn't code the new... routine, or test anything deeper than basic functionality, but it might be enough to get you going.
    it's certainly more useful than refusing to help and belittling the request as underneath consideration...

    if you want to expand this in the future, look into indexedDB, the native browser DataBase that can run on almost all devices, including iOS.
    you can also use online storage to house (or "backend") the data that more then one user need to access.
    common backends include google spreadsheets, amazon dynamoDB, hosted mongodb, and DIY mysql.
    also consider hybrids like pouchDB+couchDB.
    Last edited by rnd me; 03-09-2014 at 10:55 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • Users who have thanked rnd me for this post:

    Khallil (03-11-2014)

  • #9
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    rmd, you are awesome!!! but what would be a better way than javascript for a simple database like this. It's not like I'll publish it, it's only for me, so I don't think I should use PHP or MySQL, and I know Nothing about PHP. Is there perhaps a better way for me tho?

  • #10
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by Khallil View Post
    rmd, you are awesome!!! but what would be a better way than javascript for a simple database like this. It's not like I'll publish it, it's only for me, so I don't think I should use PHP or MySQL, and I know Nothing about PHP. Is there perhaps a better way for me tho?
    i mentioned a few options at the end of my last post. even with localStorage, you should be able to hold 50,000+ rows of data like the stuff shown. on the easy end, there's IndexedDB, TaffyDB and pouchDB, which don't need installed. it really depends on how you want to fetch the data; how many query options you want/need and what you're comfortable programming. mongoDB is a popular choice, far outperforming mySQL and easier than mysql to get up and running. But i don't think you need heavy volume or ultra-fast queries, so i would just buckle down with what you have and make it nice and shiny for now. As/If you begin to hit limits, then look for the next step.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    LinkBacks (?)

    1. 03-09-2014, 10:23 AM

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •