Hello all, i have been brushing my skills in Joomla of late. However, i have a pressing problem and i dont know how to put it but i will try. I want to make a id card page consisting of 2 columns and 5 rows on an A4 paper. Looking at the picture below. I want to make it in such a way that the name, regno and signature and the pictures will be extracted from the database, and to get the next set of data, one needs to click on next tab. I have manually done this using CorelDraw but it was so tasking. i would be glad if someone can help me out. Thanks in advance.

Note: the background image is static while the name, regno and signature are non static but will change as the next button is pressed and all this on my local server please.

Background knowledge:
Mysql 4, joomla 2.5, Coreldraw 12, How to install and configure xampp,

Please state clearly what needs to be done. To make it easier you can use Dreamweaver to execute this. Seems you are a new kid on the block? Hit me up

You need some programming skills to do this. if you understand how Java servlets and JSP work, you will be able to get it done without stress.

dreamweaver is the best to do dat

Thanks to you guys for the advice. I went back to unpack my learning skills in dreamweaver and combining it with mysql as my database and xamp as my server, i was able to bring up a one column id card using the repeat region. however all the repeat behavior could do was place it on a one column by 5 rows. however i wished it could show 2 column by 5 rows which makes ten id card per page. i came across this extension called MX looper and i tried having a 2 by 5 column to no avail. so can someone assist me here or some codes?

thanks

hisblud: Thanks to you guys for the advice. I went back to unpack my learning skills in dreamweaver and combining it with mysql as my database and xamp as my server, i was able to bring up a one column id card using the repeat region. however all the repeat behavior could do was place it on a one column by 5 rows. however i wished it could show 2 column by 5 rows which makes ten id card per page. i came across this extension called MX looper and i tried having a 2 by 5 column to no avail. so can someone assist me here or some codes?

thanks

Just make a table of ur desire 2-column on ur webpage and make ur recordset( i.e filter shld be none).dont forget to bind ur recordset value to ur table column field then make repetition region to ur 2-colum tble above and input 5 in the repetion region row to display 5 rows per page.(make sure u highlight the table b4 u make repetition region.

preview it in browser to see ur work done.

I would have asked you to post your code here but the code your dreamweaver has generated for this simple task may be too dirty to waste time comprehending.

You need to learn dreamweaver in order to click your way through web development, you can only click what Dreamweaver has. Dreamweaver may not have all you want just how you want it.

You need to learn PHP and MySQL to master your way through web development.

I will try to break down the process, (please do not expect to see step by step click here click there solution as I don't work with Dreamweaver, I work with the codes).


Let us break the process into two parts. When you get past the first part we will go to the second one, so that it is not confusing.
Part 1: Fetching record for 10 nurses (2 columns, 5 rows)
Part 2: Paginating your records, 10 nurses per page.


Part 1:
Set your container div to twice the size of a card.

I will try to write codes here, its something i hate to do on Nairaland as codes generate smiley faces that the developers behind Nairaland cannot fix. Indentation is also not preserved.


The PHP, MySQL and HTML

<div id="container">
<?php
$result = @mysql_query("select all your data from the table limit 10";
while($row = @mysql_fetch_array($result)){
?>
<div class="card">
populate your card details for the sexy nurses here, your card details are in the $row[] array.
</div>
<?php
}
?>
</div>


The CSS.
That class "card" should have a fixed width that's not more than half the width of the container div, it should also have a "float:left" attribute so that you can have 2 columns.
The container width should not be equal to or less than 3 times the width of the class "card" if not you will be pulling up data in 3 columns instead of 2.

Dual Core: ...I will try to write codes here, its something i hate to do on Nairaland as codes generate smiley faces that the developers behind Nairaland cannot fix. Indentation is also not preserved.

I thought Nairaland has the [#] code button! :/

<div id="container">
<?php
    $result = @mysql_query("select all your data from the table limit 10";
    while($row = @mysql_fetch_array($result)){
?>

<div class="card">
    // populate your card details for the sexy nurses here, your card details are in the $row[] array. 
</div>

<?php
   }
?>
</div>

ROTFL the [#] code button helps you fix the problem of smileys, but I madeup these coloring.

The the [code] bbcode doesn't fix the smiley issue.
That's some work with the coloring, thanks. It's made it neater and easier to understand now.

@talk2me thanks for the post, i did all you stated even using the MX looper by interakt.com, yet it still displayed 1 x 5 info on the browser.

Thanks also dualcore. Noted, i will take a serious take on php and css on web design. On the codes, i will take time to understand all you have stated, tho am a novice in php, but surely it aint unsurmountable. Thanks once again.

You're welcome, ask questions about anything and if I am able to give you an answer straight up, I will...if not I'll just Google.

Dual Core:
Let us break the process into two parts. When you get past the first part we will go to the second one, so that it is not confusing.
Part 1: Fetching record for 10 nurses (2 columns, 5 rows)
Part 2: Paginating your records, 10 nurses per page.


Part 1:
Set your container div to twice the size of a card.

I will try to write codes here, its something i hate to do on Nairaland as codes generate smiley faces that the developers behind Nairaland cannot fix. Indentation is also not preserved.


The PHP, MySQL and HTML

<div id="container">
<?php
$result = @mysql_query("select all your data from the table limit 10";
while($row = @mysql_fetch_array($result)){
?>
<div class="card">
populate your card details for the sexy nurses here, your card details are in the $row[] array.
</div>
<?php
}
?>
</div>


[b]The CSS.[/b]
That class "card" should have a fixed width that's not more than half the width of the container div, it should also have a "float:left" attribute so that you can have 2 columns.
The container width should not be equal to or less than 3 times the width of the class "card" if not you will be pulling up data in 3 columns instead of 2.

After looking at the above codes, i noticed that it has a lot to do with CSS and hence i had to delve into some little preparatory understanding of CSS at this link

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt2.html

to get me up to speed on CSS. Thank God what you wrote was in PHP which is what am using as my server side with dreamweaver. After a brief in CSS, i will look at what i have designed in the light of what you have presented and any question that might arise, i will post it. thanks for your kind offer and may God bless you.

hisblud: @talk2me thanks for the post, i did all you stated even using the MX looper by interakt.com, yet it still displayed 1 x 5 info on the browser.

Thanks also dualcoe. Noted, i will take a serious take on php and css on web design. On the codes, i will take time to understand all you have stated, tho am a novice in php, but surely it aint unsurmountable. Thanks once again.

In what i explain above,u wil not use mx looper.just use ur normal default dreamweaver recordset and follow the instruction above and try again.
one gud thing about dreamweaver is that you can execute many advance task without u write any code.
if u still not get it let me know

talk2me006:
In what i explain above,u wil not use mx looper.just use ur normal default dreamweaver recordset and follow the instruction above and try again.
one gud thing about dreamweaver is that you can execute many advance task without u write any code.
if u still not get it let me know

yes i abandoned the mx looper extension afap(as fast as possible), and i used the default repeat region behavior instead, yet it shows the same thing. As i got reading, i discovered that the table in dreamweaver is sort of a fixed but CSS allows one to adjust table with some level of flexibility and hence the above link on tutorial to use CSS. Will try and post update on how the dreamweaver designed table looks. thanks again talk2me

Hi guys, i have sort of gone into the "trenches" on CSS, PHP, HTML ever since i read what DUALCORE state in the program above. i had to get myself "wet" in the above programs before i ask any further questions. thanks DUALCORE!!! Its a challenge that i see an opportunity to fasttrack my knowledge in CSS,PHP, HTML...

@DUALCORE
I think am stuck. Please look at what am able to make out of what you posted up there.

<head>
<style>
body {
background-color: white;
background-image: url("" );
background-repeat: no-repeat;
}
#container
{
width:950px;
margin:5px auto;
border:7px solid #bbb;
padding:10px;
}
.topheadline
{
padding: 1px;
font-size: 23px;
font-family: arial black;
left: 35%;
top: 5%;
width: 58%;
position: absolute;
}

.biggestcolumn
{
top: 67px;
padding: 10px;
font-size: small;
left: 388px;
width: 40%;
text-align: justify;
background: lightgrey;
position: absolute;
}

.mediumcolumn
{
padding: 10px;
top:40%;
left: 5%;
width: 35%;
background: lightsalmon;
position: absolute;
}

.smallcolumn {
padding: 10px;
left: 45%;
width: 25%;
top: 65%;
background: lightsalmon;
position: absolute;
}
</style>
</head>

<body>
<div id="container">
<?php
// set database server access variables:
$host = "localhost";
$user = "root";
$pass = "nurse";
$db = "new";

// open connection
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!" );

// select database
mysql_select_db($db) or die ("Unable to select database!" );

// create query
$query = "SELECT * FROM nurse_cards";

// execute query
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
while($row = @mysql_fetch_array($result)){
?>


<div class="card">


<div class="topheadline" > //header of the id card
NURSE UNION
</div>

<div class="biggestcolumn" > // member section
MEMBER
</div>

<div class="mediumcolumn" > //NAME section
NAME:
</div>

<div class="smallcolumn" > //REG NO. section
REGNO:
</div>

</div>

<?php
}
?>
</div>

I can't spot any problems or errors with your code. The data you are pulling out in the while loop is going to be stored in the $row[] array. So if you have a field like "name" to get that field for every while loop it will be $row['name'].

Where exactly are you stuck?

hi dualcore, i tried replying you but was banned! guess the bot saw something in the code and assumed it was offensive or what. i will create a blog and post a link for you to see what am doing.

Thanks for your support once again...

hi dualcore
here is the link to the blog, please, kindly place your observation here. I would check if the blog has the option for comments.

http://4given.simplesite.com/

The name remained same for both divs because they are in the same WHILE loop. You're calling the $row['name'] variable twice in the same loop so you should expect for the same thing to be displayed twice. The $row['name'] only changes per loop. Put one div per loop and give div a class name. In css float:left the div class and that will pull the divs beside each other. To ensure you have just two divs on one row set the container width to be no lesser than 2 times the div width and no greater than 3 times the div width.

Sorry for getting banned, you can talk to the mods about that.

Dual Core: The name remained same for both divs because they are in the same WHILE loop. You're calling the $row['name'] variable twice in the same loop so you should expect for the same thing to be displayed twice. The $row['name'] only changes per loop. Put one div per loop and give div a class name. In css float:left the div class and that will pull the divs beside each other. To ensure you have just two divs on one row set the container width to be no lesser than 2 times the div width and no greater than 3 times the div width.

Sorry for getting banned, you can talk to the mods about that.

Can you teach all this this you know for a fee and how much? solution4sucess (@) yahoo.com

Thanks for your concern

Dual Core: The name remained same for both divs because they are in the same WHILE loop. You're calling the $row['name'] variable twice in the same loop so you should expect for the same thing to be displayed twice. The $row['name'] only changes per loop.

ok got this

Put one div per loop and give div a class name. In css float:left the div class and that will pull the divs beside each other.

hmm this is not very clear, which of the divs are you refering to? . Please look at the codes,

while($row = @mysql_fetch_array($result)){
?>


<div class="idregno">

<div class="name">
<!--name of nurse-->
<?php echo $row['studname'] ?>
</div>

<div class="regno">
<!--nurse registration number-->
<?php echo $row['regnum'] ?>
</div>

<div class="sign">
<!--picture of nurse signature -->
<?php echo $row['sign'] ?>
</div>
</div>

<?php
}
?>

. You would notice that "idregno" class [RED] is a class containing 3 other classes -name, regno and sign class[GREEN], so from your quote, which of the classes are you refering to: idregno class or the other three class inside idregno class. Please note idregno is NOT the container but a sub-container, the main container its at the top of the coding.

To ensure you have just two divs on one row set the container width to be no lesser than 2 times the div width and no greater than 3 times the div width.

Sorry for getting banned, you can talk to the mods about that.

. After concentrating first of all on one loop to see the result, it all lumped the output, how can i separate them to appear beneath each other? Attached is a picture of the lumped output. How about pagination, to move to next page to display next list of nurses until it reaches the end. Thanks

Here is the image of lumped output:

UPDATE I have resolved THANNKS

DualCore!! i must say a VERY BIG thank you for your good time, training in the right direction. i must say it has being a worthy experience in PHP, CSS which i ignored in the past. But after this guidance by you, i have decided to cover it indept though i had started learning OOP in Java and my goal is to be able to develop androids. Thank you verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrry Much!!! much blessings to you and all...I am able to put what you showed in CSS instead of using tables which are 'rigid'. Thanks