A simple web page form input/output question - html

Okay so a part of the web page that I'm currently building on Dreamweaver CS4 requires this:
(Its for grocery items in a supermarket)
Visitor types item name into a textfield, hits the submit button.
The html page for that specific item will be displayed inside an IFrame below. The html page names however are named in their respective item ID's 1B45.html, 1002.html etc
Each item has a 4 character ID such as 123A or 0002 etc. I have a table with two columns: ID and item name, I'm not really sure how to do the conversions.
I guess that is simple enough, here is the coding I have for this part so far:
<input type="text" name="textfield2" id="textfield2" />
<input type="submit" name="button2" id="button2" value="Search" />
<iframe frameborder="1" width="100%">
</iframe>
Can anyone direct me on what to do next?
I'll probably place the 500 or so item html pages in the same folder as this one (index.html).
I think thats as simple as I can put it, thanks for your time :D

You will need a database. You will use PHP and MySQL. You will not have 500 separate pages. You will have one page that gives you the query results, depending on the particular query.

I don't mean to make you feel crappy, I understand you're probably fairly new to all of this.
I think you're going about the project all wrong. Running a database is a far more efficient and lower workload way of doing this. IFrames and hundreds of HTML pages is going to be far more work than the tradeoff. Especially if you are charging $ by the hour.
I'd love to help lend what advice I can and even get you pointed in the right direction of DB work. To be honest, my first CMS used flat files as the database back when I was first learning... and even something like that will lower your work load (my second iteration of my cms was using MS Access, and now I use Sql Server exclusively). If you're willing to take the time to learn it all, it's not that difficult to wrap your head around the basics.
Don't listen to people who point you in a single technology direction, but work with what you're comfortable with. PHP, ASP, ASP.NET RUBY.. all of these will give you the tools you need to get started. For a project like this, it simply boils down to preference.
To give you a brief idea of how simple this "could" be, think about this
1 Database with 1 Table for all of your supermarket items
1 page to display a single item and all of it's details
1 page to display a list of all the items (paged results are nice too but are a little harder to code)
then the rest of your website as per usual.

It seems like the current answers are "you're doing it wrong" and I kind of agree. But I figured I'd take a stab at showing you exactly how to "do it wrong".
My solution is to use javascript to set the location of the IFrame to the text within your textbox. I haven't tested it and I'm not very good at javascript, but it might give you an idea where to start.
In the head:
<script type="text/javascript">
function convert(){
var itemId = document.getElementById('textfield2').value;
document.getElementById('theframe').src = itemId + ".html";
}
</script>
in the body:
<input type="text" name="textfield2" id="textfield2" />
<input type="submit" name="button2" id="button2" value="Search" onclick="convert();" />
<iframe id="theframe" frameborder="1" width="100%">
</iframe>

Related

New to HTML and need advice

I want to build a financial management website for a company. I want to create inputs where the user can add information and then they can see a summary of their data along with a graph, and also be able to do forecasts.
Honestly, I have no idea where to start on this. I'm new to HTML, but I've done a few tutorials and I've worked with C# in the past. I just bought a website domain and I have installed Wordpress.
Any advice is welcome. Thanks in advance.
I am beginner just like you.I see that you need frontend(client side) and backend(database).My opinion is to try learn this 5 first:HTML,CSS,JavaScript,MySql,PHP.After that you will have better vision what you can do.Good learning resourses are:
https://www.codecademy.com/learn
https://www.bento.io/
html5rocks
css-tricks
sqlzoo.net/
Google it,learn and work hard.Good luck.
I am a beginner too.
Here you've got my advices:
Try to start to understand how HTML works. (You need to know that HTML never acts at the server.
After you study tables, divs and some CSS (image is very important).
Its time to start studying PHP.
With a very low level of PHP (knowing how variables work) and all HTML you've learnt before, you will be able to create a simple webpage that contains a sign up.
Now its time to introduce that data in some place.
Where will you do it?
Thats right, you will do it in a MYSQL database.
So for a perfect server you need ---> HTML+CSS+PHP+MYSQL+attitude
P.S. I recomend you to buy a rapberry pi and install APACHE server and MYSQL on it so you can fight face to face with HTML, CSS and PHP without useing Wordpress
If you want the user to be able to input data, you can use a <form> tag. Here's an example:
<form method="post">
<input type="text" id="input">
<input type="submit" id="sub">
</form>
If you want the data to be displayed to the user through the website, you can use document.getElementById("body tag id here").innerHTML = "data here".

My website contains lots of sub pages, is it the common practice or is there an alternative for that?

I am making a website which will have lots of photographs. When a user clicks on a particular photo, a new page will be loaded with that photo being displayed bigger in size. There is a next button which will take the user to another page where there is another photograph. Therefore, my website will have lots of sub webpages( a little more than the number of photographs I have on the website). So is it usually how these kinds of websites are made,i.e., with lots of webpages or is there any other alternative for it?
No, that's not the usual aproach, al least on these days.
When we encounter with a similar situation like your case, we usually try to make it dynamic.
For example, if you need to show a lot of photos with the same markup and format, maybe the best option is to have a template with a variable.
The variable will be the photo url and the template will be everything surrounding it.
The page is the same, but only the photo changes.
There are a lot of advantages of doing this. Mainteneance, simplicity, work-load, cache...
Of course that can be use in another cases, like viewing a new details, when you would have only a ViewNew page, and you pass a parameter with the identifier of the new so you can show the correct request.
There are plenty ways to achieve this, most of them require server side code, to handle and process the request, like:
PHP
ASP/ASP.NET
Java
ColdFusion
Perl
Ruby
Phyton
...
But, some of this operations, could be also achieve by javascrip, a client side script code.
You could work with pure javascript or use a framework to make things easy and compatible. Here's some examples of javascript frameworks:
jQuery
YUI
Mootools
Dojo
Midori
...
I don't know if you want a particular examples using one of this languages or only know alternatives. If you need examples or need more information I'll be pleased of provide some.
Also, It's common that even if you are using a server side code, use javascript too, because can handle the behaviour on the website and/or make ajax request for asyncronous requests.
EXAMPLES
JavaScript simple:
jsFiddle
HTML:
<div>
<button id="previous" onClick="previousImg();">Previous</button>
<button id="next" onClick="nextImg();">Next</button>
</div>
<div>
<img id="imgViewer" src="http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-1-icon.png" />
</div>
JavaScript:
var imgUrlTemplate = 'http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-$number$-icon.png';
var imgCounter = 1;
var imgViewerNode = document.getElementById("imgViewer");
function previousImg() {
if(imgCounter > 1) {
imgCounter--;
imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
function nextImg() {
if(imgCounter < 9) {
imgCounter++; imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
If you have 1 html page and in that you write the PHP include 'photographlink' in the body with a case system of some sort. It will use 1 html page and it will include a different photograph depending on which photograpg is clicked
http://www.php.net/manual/en/function.include.php
I think the better way is to use javascript, my tip is to use jQuery framework to dynamically load and visualize images. You can find in the web some plugins that can simplify your life.
demo of one plugin

how to set auto complete option to on

I have many websites like Facebook where we write a email address and we just click a button, from this a list of email address's rolls down.
Can anyone tell me how this is achieved? Can it be done with just HTML or do i need to learn any other language?
This is accomplished using Javascript or AJAX requests to query the databases "live" and the return a data set. If I understand you correctly like on Facebook where you type in a Friends name and it will pull back a full list of names which may be your friends.
Jquery, Ajax, Javascript, PHP and Mysql would be some good researching points.
It would be worth searching for "How to create a PHP Ajax request to auto populate HTML fields"
If you are referring to Auto Complete within a browser this is a local setting which is controlled by the end user or their administrator and from what I am aware from HTML alone you can not manipulate this.
I fully agree with Steve's answer. In addition you might want to check out the following:
http://ajaxdump.com/2010/08/11/10-cool-auto-complete-scripts-using-ajaxjquerymootoolsprototype/
http://www.freshdesignweb.com/jquery-ajax-autocomplete-plugins.html
Hope it will help you
Well i go on and search a lot and then i found this is very simple!!
you just need is to type autocomplete = "on" and give it a name and then make a submit button
the code goes here:
<input type="text" name="Name" autocomplete="on" />
<input type="submit" />

How to make sure an HTML table renders incrementally

I have an old-style CGI program which generates a large HTML table. Because the table contents are slow to calculate (even though it's not that big) I would like to print it one row at a time, and have the browser display rows as they are fetched.
If you search online you'll see that style="table-layout: fixed" is supposed to help some browsers do this, but on the other hand Firefox can render incrementally even without it. My test browser is Firefox 4.0b10 on Windows but I cannot get it to display incrementally using the simple example below:
<html>
<head>
<title>x</title>
</head>
<body>
<table width="100%" style="table-layout: fixed" rows="4" cols="4">
<col width="10%" />
<col width="20%" />
<col width="30%" />
<col width="40%" />
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
<tr><td width="10%">a</td><td width="20%">b</td><td width="30%">c</td><td width="40%">d</td></tr>
<!-- flush output, one second pause... -->
</table>
</body>
</html>
Instead the page is blank until the end of the download, when the whole table appears. I've tried various ways to tell the browser the table dimensions in advance so it should have no problem displaying it as it arrives, but they don't help. (Removing the hints doesn't help either.)
If I modify my CGI script to close and restart the table between each row, with an extra blank paragraph in between, then the page does render incrementally in the browser. This shows that the data is getting to the browser incrementally - just Firefox is choosing not to render it.
Ironically, much more complex scripts producing larger tables seem to do what I want, showing one row at a time as it downloads, but whenever I try to reduce the output to a minimal test case it doesn't work. This leads me to suspect there is some complexity heuristic used by Firefox's rendering engine.
What's the magic dust I need to tell the browser to always display the table as downloaded so far?
For what it is worth.
The Firefox I use Firefox 3.6.16 does not display until the page is downloaded, regardless of what is being downloaded.
You could look for settings in about:config, but I have not seen any solution to this,
there are addins to help with displaying placeholders. but they don't always work either.
Just found this
Read it OR try
about:config - in browse bar
select new
create integer
nglayout.initialpaint.delay
set value to 0
cheers
First of all, I'd say it's seldom good user interface design to load huge amounts of data at once. In most cases, it's better to offer some sort of search or at least paging functionality. There may be exceptions, but people simply cannot process very large quantities of information, and apps serving far more data than people have any use for aren't just wasting cycles, they are badly designed. Imagine if Google displayed the first 10,000 hits by default, or even 1,000. Most users wouldn't even look beyond the first 5 or so, and the amount of wasted bandwidth...
That said, it may of course not be your fault if the page is badly designed. Or it may be, but you'll need a quick fix before coming back to redesign the solution later. :)
One way to make this happen would be to render the table client-side instead of on the server. If there's nothing else heavy on the page, the user would be served quickly with the other content, and the area where the table will appear could contain an animated GIF or similar to indicate the software is "working". You could use an AJAX-call to fetch the data for the table, and modify the DOM in Javascript. You could then create for instance 100 rows at a time and use window.setTimeout to allow the browser to render the updated DOM before continuing.
A good article explaining the event dispatch model may be of help if you choose to go down this path:
http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/
OK, so how about dropping client-side rendering but fetching and replacing server-side rendered HTML within a placeholder (and thus the table) multiple times? The server-side would have to use a background thread and supply a handle (e.g. a GUID) in it's initial response that an AJAX call could then use to ask for the table. The server could reply with a few rows plus an indication that it's not done, prompting the client to repeat this until finished.
I suppose it would be a little messy, but at least it would allow you to use the same page for your report. A query string parameter could tell the page whether to render completely or emit script to call back to get the data.

Should I Use Anchor, Button Or Form Submit For "Follow" Feature In Rails

I am developing an application in Rails 3 using a nosql database. I am trying to add a "Follow" feature similar to twitter or github.
In terms of markup, I have determined that there are three ways to do this.
1) Use a regular anchor. (Github Uses This Method)
Follow
2) Use a button. (Twitter Uses This Method)
<button href="/friendships/create/">Follow</button>
3) Use a form with a submit button. (Has some advantages for me, but I haven't see anyone do it yet.)
<form method="post" id="connection_new" class="connection_new" action="/users/follow">
<input type="hidden" value="60d7b563355243796dd8496e17d36329" name="target" id="target">
<input type="submit" value="Follow" name="commit" id="connection_submit">
</form>
Since I want to store the user_id in the database and not the username, options 1 and 2 will force me to do a database query to get the actual user_id, whereas option 3 will allow me to store the user_id in a hidden form field so that I don't have to do any database lookups. I can just get the id from the params hash on form submission.
I have successfully got each of these methods working, but I would like to know what is the best way to do this. Which way is more semantic, secure, better for spiders, etc...? Is there a reason both twitter and github don't use forms to do this?
Any guidance would be appreciated. I am leaning towards using the form method since then I don't have to query the db to get the id of the user, but I am worried that there must be a reason the big guys are just using anchors or buttons for this.
I am a newb so go easy on me if I am totally missing something. Thanks!
It's really just based on personal preference. The simple anchor tag is nice and easy, shows clear intent, and is nice and concise. You can just create an AJAX post request with Javascript to make it all happen quickly. The database operation shouldn't be a problem. Even if it eventually will be too slow (though I doubt it), I'd say you're likely doing premature optimization.