Need help to build up UI to access back end database

[roseli98]

Dear All,

 

I am new to this forum so I apologize first if anyone asked this before. Further more, my questions might be basic as I had little experience.

 

Currently I am trying to design a UI to access back end database.

The front page should look like:

Header

Chart Menu 1

Menu 2

Menu 3

Table

There are short lists of check boxes in each menu and a longer list of check boxes in the table. Once one or more check boxes are picked, the chart will access the database and draw char 1 or chart 1 & 2 on the UI page. The data is **Live** Chart 1. If I decide to have Chart 2 (still planning), then Chart 2 should access **Existing** excel chart files that haven been generated already. Example of Chart 1 is <http://finance.yahoo.com/echarts?s=%5EIXIC+Interactive#symbol=%5Eixic;range=1d;compare=;indicator=volume;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined;>

The two types of UI drafts are in the attached screenshots. My questions are:

1. Where to start? There are 2 parts: lay out and access the back end database. Should database be considered too while design the UI? Any difference for the UI codes (html/css/javascript) if to access MySQL or Oracle SQL ? And what language to use to access the database?

2. What are the best languages to design this UI layout? I did some research, html (div or table) might work but I am not sure it's good enough. Maybe html plus .css to format the layout?

How about Javascript? What can it do here?

3. Any other pointers that I can't think of?

Your sharing of experience is highly appreciated.

Rose

[Day]

As for languages, you will use HTML to structure your pages, CSS to format/style them, and you could use JavaScript for some of the interactive content, but PHP is capable of many of the things you would do with JavaScript.

[davej]

I would break it into three parts:

1. Use HTML and CSS to create the User Interface.

2. Use PHP and SQL for the database query.

3. Use HTML5 Canvas to create the graph.

 

There are tutorials available...

 

http://www.w3schools.com/

[roseli98]

Thanks Day and DaveJ !!!! They are very good pointers that will save me a lot time....