Grow your CSS skills. Land your dream job.

Mysql Query Appearance Help

  • # May 6, 2013 at 6:40 pm

    Hi all!

    So this is the website i have:

    http://www.testeeee.cixx6.com/select_cafes.php

    That is an example page, that do the query to the database. In the future, when i insert new data on database: http://www.testeeee.cixx6.com/admin/inserir_sitio.php , i will have a new entry for upload image, or multiple images, i dont know yet.

    But was you can see, the appearance of mysql query is pretty ugly, i would like to have something like this:

    http://i.imgur.com/3dGea9h.jpg

    Using this gallery script, or something that make the work:

    http://lokeshdhakar.com/projects/lightbox2/

    Thanks for the help :)

    # May 6, 2013 at 8:25 pm

    It seems that all you will need to do is call the appropriate ‘gallery’ JavaScript and CSS files, then in your PHP loop to pull out the images, add ‘rel=”lightbox”‘ as an image attribute and all should be fine!

    This is just from a quick glance of the gallery link you supplied, but it looks like that’s the answer.

    Good luck!
    Justin

    # May 7, 2013 at 4:29 am

    Yeah but when i do the query from the database the result appear so ugly .. I have it in a table, and i want help like building the “invisbile table” to get this result:

    http://i.imgur.com/3dGea9h.jpg

    Or something closer to this. I want is to look moore beautiful, because the result of the querys are pretty ugly..

    # May 7, 2013 at 9:18 am

    Create a single HTML version of one record how you would like it to look, using whichever tags (not necessarily tables) with dummy data in. Once it looks how you would like, put the HTML between a foreach loop and replace the dummy data for that which you have pulled from your query

    # May 8, 2013 at 7:11 pm

    but i dont know how to make that appearance that i want.. i mean, to have the picture on the righr and that things.. its better to create a div configuration for each query row result? can you help me getting that result or something closer? thanks :)

    # May 11, 2013 at 1:51 am

    Generally when I’m programming in PHP , the LAST thing I would ever do is emit anything that even remotely reassembled presentation. Generally the goal is to in as generic a way possible send JUST the data, and keep all the formatting and presentation browser side.

    As the web moves forward and becomes even more dynamic , having bits of design and layout stranded in server code will increasingly become a boat anchor to anyone who has to deal with it.

    JSON, XML and things like that are easy to format with PHP code and typically pretty easy to shuffle about client side as well. Many tools such as datagrids for browsing databases use these types of formats. I use both , and have been able to service the data needs of even complex sites with but one or two PHP files.

    While owing to it’s bloat I really don’t care that much for jQuery , a lot of the data browsing plugins for it are pretty decent and even fairly reasonable to style, letting one get back to making pretty things that people love to use.

    # May 11, 2013 at 9:01 am

    So, im new to all this stuff, DrClue, can you help me doing what i want? :)

    # May 11, 2013 at 8:12 pm

    and now that i already have the my sql database, and all the php working, i really would like to use it, since i have less time to get this project done. i just want help with the appearance of mysql query results. :s

    # May 11, 2013 at 8:39 pm

    Listen, Austin. The first thing you’ll want to do, is to add, next to that table, just a SAMPLE of a product(or whatever those things are). So just an “Emigrante”, purely coded in HTML, CSS, which contains simple text, added by you manually. For instance, just create a div, set the width and height. Borders if you want, padding, margin/positioning. Remember, there will be more divs like it, so optimize it in such a way that they will be aligned on the same level, with space beetween. After that, inside that div, place an img tag, styled as you wish(size, borders…), and make it float to the left (float: left; in CSS). Next, just add some p elements or headings, and style their families, sizes, colors.
    There you go: a box which contains your information. Now replace EVERYTHING that is variable. The content. Like the source of the image, the text within tags…Replace them with the array witch contains your query results, and place it in a loop.
    Got it? :)

    # May 11, 2013 at 8:59 pm

    Yeah i got it. i will try to do that, thanks :) If i got some doubts, or if it get ugly, i will contact you ahah :)

    # June 8, 2013 at 2:40 am

    Sorry Austinnnnn that I was not able to keep up on this thread , but glad to see you achieved your goals.
    The folks I code for have some really ambitious goals that find me tied to the keyboard creating rather first of class code that greatly curtails my time in general surfing

    # June 27, 2013 at 1:29 pm

    I didnt got what i want yet :/ So basically my image name is saved in the db when i insert a place. All thumbs are in images/thumbs and images are on images/.

    What i want is to display the thumb on the left, and then the name on the right, following with the contact and all the stuff from that place. What i have to do to display all the results in rows and adjust their appearance?

    # July 1, 2013 at 6:19 am

    Having responded to your css-tricks email, and not seen word back I figured I would try to find a moment to dig up this thread and see how things are going.

    There are a number of ways to skin this cat, and it sorta depends on the technologies your comfortable with.

    For my own part , the choice is often to output the MySql data as XML and use an XSL structural stylesheet to map the data into the presentation.
    XSL shares a lot of the valuable characteristics CSS has and works all the way back to even (gasp) IE6.

    You then only need to define a single exemplar of what a single row of data would look like and it gets used as basically a template for however many rows are output.

    As I said there are a number of ways to do this type of thing , but I’ve found these long standing w3c standards to be very high performance as really, once the browser caches that XSL stylesheet , your just sending data.

    XSL can take a moment to get comfortable with , but IMHO it’s more than worth the trip as it can actually be used with or without any browser side scripting and once you get the hang of it the XSL files you create are very re-usable. I’ve some XSL sheets I’ve been re-using for years.

    # July 14, 2013 at 12:46 pm

    First, i wanna thanks you, you are an amazing person :)

    i manage to put the things like i wanted, see:

    http://turismomurtoseiro.com/select_edificios.php

    i think its prety good.
    i display results in rows, and then with echo’s i write html, and with a couple of css, i thinks its simple but pretty

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".