Click here to Skip to main content
15,900,973 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Ive been trying to re-learn to develop web aps and one of the projects i have to work on is to create 10 containers and 10 boxes that I can populate the text in the boxes from fields in the access db.

When someone drags them to the containers the order they drag them I want to store back in the access db.

So example box named 1 - 10 empty and in the database i have a table with 10 records in it that are a - j in random order.

On load I want to draw 10 empty containers and 10 boxes populated with the random letters.

The user can then drag the boxes to the empty containers and then hit submit and it will store the new order back into the access db.

Not ideal SQL etc would be better but these are my constraints.

Any help would be great.

What I have tried:

Searched WC3 got an idea on how to create drag and drop enabled items and sort of gather how its getting the "text" value as data.

Bought 3 books on mastering HTML5 for web apps. "crap shoot". one is basic html and some non working examples of web apps. The other 2 are more of a developers reference of unexplained functions and plugins.
created an access db.

installed netbeans, notepad++, and Komposer to try and find an IDE that works and that I can use.

Created a skeleton HTML doc with the script to enable drag and drop objects.

Completely lost on:

drawing boxes
creating a data connection to the access db
pulling data from the tables to put in the boxes
collecting and pushing the stored values back to the db.

It looked easy when I took the project idea but ive found that the days of
good IDE like dream weaver, coffee cup etc... all gone or 50$ a month subscriptions. The free ones are just an editor and the game is all different in mark up. My back ground was flashing text in 95 96 with note pad and later front page and dream weaver until being a freelance web developer starved and I moved on lol. Now I want to eventually make web apps for learning platforms and this is where I am starting.


Thanks in advance.
Posted
Updated 28-Dec-17 12:51pm

1 solution

If you'd like to create a "complete" web application, then things can get a lot more complex/complicated even for a simple task.

Web apps are server-client based, meaning that you'll first need to request the letters from the server, then send the new order back, all these with HTTP(S) requests.

Unfortunately the access database isn't a proper HTTP(S) server, just a database. Meaning you won't be able to directly request data from it. It might function as a HTTP server, but even then it would be a very bad practice to let the client interact with it directly for security reasons.

I shamelessly stolen a picture to illustrate the idea: Picture[^]

So you have the client that you as a person can interact with, and have a database server running (access). You're only missing the server that interacts with both the client and the database.

There are a lot of HTTP servers to choose from, the most popular ones are Apache and Nginx (I prefer the latter). Just pick one that has easier installation and more documentation available.

The server itself won't do much by itself after installing, just serve files that you request from it with the client.

So you'll somehow have to tell it what to do with a request, meaning you'll have to implement the logic of interacting with both the database and the client, and you can do this with the help of server-side(backend) programming languages.

There are a lot of options here as well (NodeJS, Ruby, Go etc.), but for starters I'd recommend PHP, as it can be put in your html(now php) file.

I won't go in detail on how to write your PHP code, as I don't have a lot of experience with the language, but I'm sure there are a lot of tutorials and guides online (you actually don't need books for a lot of stuff).

There will be two scenarios on the server you have to implement:

-Upon one request(GET), it will get data from the database with SQL, and send it to the client.

-And on another request(POST), it will update the data in the database with the one that was sent by the client.

(As far as I know access uses SQL as well)

As for the client:

Start thinking in divs, everything is a div.(This really is a generalization, and I can see the cringe of the webdevs reading it, but it will make your life easier.)

So the containers are divs, and the boxes are also divs, but smaller. There you have your boxes, just draw them like you would draw the containers, just give them different CSS class and rules.

Apart from creating the content, you will need to somehow interact with them, this can be done with javaScript. I'd suggest going through javaScript guides and tutorials to get the hang of it. You can also just simply use jQuery first, as it is easier to use compared to vanilla javaScript, however it would still be essential to learn how JS works exactly later on.

Another concept to look into is AJAX requests, you'll probably need it for your submit button, with it you can send the data to your server.

There will be a quite lot of reading and learning involved, but writing a full web application is like writing 2 applications that interact with eachother, so it will be twice the work.

I won't go much more into detail, as this answer is already an essay, and should be enough to get you started.

I hope I could help.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900