11. Transform XML to HTML by using XSL/XSLT

Create an XSLT document that transforms XML into HTML, in a browser-friendly manner.
This video is part of a playlist on XML and XSD: • 1. XSD Overview: Why u...
Source code is freely available on GitHub at: github.com/dis...

[@descobra5462]

So its easier to plan out the html or text first then implement the xsl coding?

[@discospiff]

That's my approach, yes. Design what the UI looks like, consider the data, then implement the data in the UI.

[@muhammadkaabouchi8584]

Cant we just use match instead of for each?

[@amirulazmy1059]

Hi do you have any tutorial on generating bar chart instead of table ? Thank you

[@discospiff]

If I needed to generate a bar chart, I'd use a library to do it. Something like bootstrap, just off the top of my head.

[@franciscorojao6552]

Hi, so basically i copied your XSD, XSL and XML and when i try to see the output on the browser, it just shows de content of the xml, nothing of the tables , name or the content in h1 tag. Any idea how to resolve this? Thank you for your time.

[@discospiff]

What browser are you using? If you're opening the file locally, each browser handles it a different way, due to security policies. If you run it through a web server and then own it in a browser with a url, they are more consistent, and they should parse it properly.

[@asmaghanty7597]

@@discospiff hi I encountered the same problem. I use Google Chrome

[@annemarieg.3084]

I don't understand the use of the .xsd file here, could this not be done between the .XML and .xsl files alone?

[@discospiff]

Yes, you only need XML and XSL to transform XML to another format (like HTML). While optional, the XSD does provide a very valuable purpose: it ensures that the XML is in good form, so that it can be transformed.

[@annemarieg.3084]

Thank you. I've followed this tutorial trying to create my own Students Grades xsl file but the .xsl is still being rendered as a XML unformatted, I have put all the necessary tags as shown in the video and even created the additional xsd file but the end result still doesn't appear html formatted

[@discospiff]

@@annemarieg.3084 It's very browser dependent. In my experience: 1) IE/Edge: will perform the transformation on a local file (on your hard drive), or one that is hosted remotely. 2) Chrome: will not show anything if you are loading a local file. Will parse properly if hosted remotely. Reason being, they consider it a security risk, if someone emails you an attachment with transformation, which spoofs a real website. 3) Firefox: will show the raw data, unformatted, as I recall, if from local. Will parse properly if hosted. A trick if you have Visual Studio: you can place the files there, then run, debug, or preview the files in a browser. Visual Studio spins up an IIS instance, with a port, so the browser thinks the files are hosted remotely, and parses them correctly. I've placed the files I used on GitHub; you're welcome to try them for yourself: github.com/discospiff/PlantPlaces18FS001/tree/master/PlantPlaces18FS001/PlantPlaces18FS001/XML Hope this helps. Brandan

[@khouloudbentaoues641]

Thank you it's a great video. I wonder if it's possible to transform xml to to excel the same way ?

[@discospiff]

Hmmm. Possibly to CSV... if the data fits csv format.

[@liamso8384]

Thanks for the help! You mentioned that you can use CSS to style the page, do you have a video where you go through this?

[@discospiff]

I don't have a video example of CSS and XSL, but I have done it before. Basically... just look at the output you'd see in a browser. It looks like HTML. Formulate the CSS to match up to that rendered HTML. So, you can still use the same things you would in an HTML page: id, class, or tag selectors. You can import the CSS the same way, because that's imported by the browser, after the XSL transformation has already occurred on the XML... so by that point, it just looks like normal HTML, if transformed properly. Hope this helps!

[@gustavopuggina2732]

Thanks for the video. I want to know, if I use div instead of table could I have the same effect, or how to alternate the colors of the lines? If you would help me.

[@discospiff]

You can use any HTML tag, so div is fine. To alternate colors, a few options: 1) Consider a library, like Bootstrap, that has this built in. You can include bootstrap here as you would an HTML page. getbootstrap.com/ 2) Use CSS's even/odd attribute: www.w3.org/Style/Examples/007/evenodd.en.html Hope that helps!

[@maes4224]

Thank you so much for this tutorial it helped me a lot!!! Regards, from Peru

[@discospiff]

Glad it helped! I've been to Peru myself. A beautiful place. Some of my co-workers live in Peru, too!

[@azharkazi7299]

Hi Brandan: Great video Helped me.. However when i followed your code to convert my XML data into HTML... But I am unable to get the text of each tag in the table... What I am getting is the table with headers content...

[@discospiff]

Try different browsers. I have noticed that they all treat XSL transformations differently. See if you get different results. If you get the same results, look very closely at angle brackets and quotes. Perhaps one is missing.

[@sdominguez8]

Brandan thank you so much for this series! Helped me a lot! 🙌👏

[@discospiff]

Glad to hear it! What was helpful?

[@ianlow78]

There is no Table element in any of the GitHub files. I think this is why people are confused.

[@ianlow78]

github.com/discospiff/PlantPlaces18FS001/blob/master/PlantPlaces18FS001/PlantPlaces18FS001/plants.xsl This is the file you need.

[@yaz9329]

Brandan you are the best

[@discospiff]

Thanks so much! Though I don't know that I'm thaaaaat good. :)

[@dukelukeum]

25.2744° S, 133.7751° E is Australia. Love the video! Helped me a lot.

[@discospiff]

I don't recall if I said that in the video, but I did GPS several plants in Sydney, Adelaide, and Melbourne. Mostly Acacia (waddle) and Ficus (fig)! Oh, and New Zealand Christmas Tree. It takes a very long time to get to Aus from Cincinnati, Ohio, USA; but my wife and I love it. It was the first place we ever went to outside of the USA, and it's where we spent our honeymoon! We've been back two more times since, including New Years Eve 2016-2017!

[@CarlosTorres-oo2ss]

I love you, sir.

[@M310GL]

It helps me a lot!! Thank you!!

[@discospiff]

Glad it helped! XSLT is a nice way to make XML human readable. I think the biggest trick is knowing that you have to link the XSL document from the XML document.

[@MaelowPi]

This greatly helped. Thank you!!!

[@discospiff]

Glad to hear it helped! XSLT is a nice way to make XML look like HTML.

[@エレダー]

unsafe for chrome : R.I.P, only for chrome

[@wafaeuchi3311]

Code please

[@jeevannileshwar]

What code?

[@maxmalinouski7398]

Спасибо, очень помогло)

[@discospiff]

Пожалуйста. Спасибо за просмотр.

[@AlienEyes]

nice video, but a quick tip. Sometimes you drag along whats not the subject of the video, for-instance, you explain how a table is build, jada-jada. I know that already, and it is not the essence of this video (correct me if I am wrong, this is the only video I have seen from you).