 Hello everybody, welcome back, our tour around the world continues with Tomek Murash presenting from Poland. Tomek will talk about how to create Moodle Form mock-ups, so Tomek, I leave you the presentation, okay? All right, thank you very much. Hello everyone. My name is Tomek Murash. I am one of the Moodle developers in innovation. We are one of the premium Moodle partners and today I'd like to talk to you about creating Moodle Form mock-ups. Now, imagine you are working on a new Moodle project, be it a plugin or some extension to Moodle. And, you know, very often part of what the plugins or in general web applications do is capturing some data from the end users and processing it, storing the database and so on. So, the normal usual way to do it is by doing a form using basically an HTML form, which means in Moodle using Moodle Form API and creating nice looking forms. So, if you are at the early stage of the project and you are just, say, gathering the requirements for the project, it's often a good idea to think about the forms that you will use. So, basically think about the way you will capture the data and what kind of data you are going to capture. So, it's a good idea to document form as part of the requirements. Now, how do you do it? I think the most obvious way would be to create some kind of Excel spreadsheet or a Word document and fill the table with, you know, with fields like, this is form number one and this is like the stuff I'm going to capture like first name, last name, email address, and these fields are required, these are not, this is a phone number, this one is email and so on and so forth. You could even do it in a more formal way, like use UML or, you know, some more formal notation to capture all this data. But, you know, the truth is that usually when you are at the early stage of gathering the requirements and talking to someone about the project that is yet to be developed, you don't really need to cover every single detail about every single data point you need to capture, like how long it's going to be with the maximum number of characters, is it string or not and so on. At this stage, usually it's more important to make your documentation and your requirements and your intention clear. And one way to do it is to do a mock-up for mock-ups, right? There's a lot of software to create for mock-ups like the one I'm just showing. There is some software that is specialized in doing for mock-ups, basically mock-ups of web applications. So it's pretty simple to create a mock-up like that, basically, you know, drag and drop all the elements and then quite quickly create a mock-up of the website. Now, what I'm going to suggest today and basically share the idea to not do mock-ups like this at all when you are designing or working on a new module project, but instead actually get your IDE up and running and actually code the whole lot, code the HTML form and then basically make a screenshot out of it and that's going to be your mock-up. Now, why would you do it? Well, first of all, if what you are designing is a plug into the existing website, then if you create the actual real HTML form in your module, you can put it there and use the existing branding team look and feel and show in a screenshot how it's really going to look like. That's why I'm showing to your client the look and feel of the website that they are used to. If you are forced to create the real code, that may help you with the design and the estimates. For example, you have some data you need to capture, you start creating the form and then you realize that well, maybe for this bit of data you need some HTML element that does not exist in Moodle API or it's difficult to create with Moodle API or maybe there will be a need for some extra JavaScript. So actually it will turn out that creating a form as required is going to take a bit more time than you may expect. So if you do create the form like this, then the code you create is actually like its perfect specification. Instead of handing to a next developer something like an Excel spreadsheet with the form description, you give someone else a real working code and then you're talking about creating the rest of the application. You are a bit ahead, you've created some code already and the development didn't even start yet. And finally, creating forms with Moodle, it's actually probably quicker than you may think and that's what I'm going to show right now as in a quick demo. Like for me, for example, it's actually easier to code than to use another software for doing the mockups. I wouldn't be using software for mockups or for diagrams very often while we write the code pretty much every single day. So it's actually easier and more convenient for me to work with ID and Moodle API than with some other tool. So, let's actually try to create a form mockup right now. Imagine that we are here are our requirements and we are working on some custom registration form. And here is the custom registration form for developers. We are asking developers to join our project. And we are asking them for some data like we're asking them what's their favorite programming language, what are the technologies they use. We give them some field for comments, ask them for a date and ask them for a file, which would be a CD upload. So I will share my screen now. Yeah, we will try to create a form. Let's see if it should be okay. Okay. So, what I have here, it's a clean Moodle 3.9 installation with just a team applied besides that it's just a normal Moodle. And what I'm going to use is SMOOSH command line utility to generate some code. So we need to put the form in a plugin normally, you know, we create, we extend Moodle by creating plugins. In this case, we decided we will use a local plugin for that. So, with MOOSH, I will create, I will basically generate a skeleton and empty local plugin. We'll call it registration. So the source code has been created. There is new plugin. Okay, fine. So I have my plugin. It's pretty much empty. There is just a few skeleton files inside. Now I need to generate my HTML form. Again, I will use command from Moodle that will use a template and generate the form text. What it's doing, I will call the form registration. What this is doing is it will create a class, form class, but also a code snippet for using the form. And we redirect it into registration.php script, the script that I will use to actually open the form. The code fragment has been created. This is what it is. It's just the fragment piece of code that you need to use in your script. So we need to make it a valid PHP script by just adding an attack. We need to make it a valid Moodle page. So basically that means bootstrapping Moodle by adding config PHP. And we need to redirect it up. Okay. And now another thing we need to do, we need to display header and the footer. As you can see I'm doing a lot of typos. I'm a bit nervous. Sorry about that. Footer. And that should be it. This is our form. As you can see it's empty. By default it only has the buttons and that's all there is. Now we need to add the elements for our form. So basically here are our requirements. And we need to add the elements for this. Hopefully Moosh has a command from Moosh has a list of the HTML elements that Moodle supports. So for the first one we had our favorite language we select. Then we said we'll have check boxes for technologies. We will use actually advanced checkbox which is a bit handier than the normal checkbox. And we had one for MySQL. Postgres. We said there was a docker. And we said we'll have text area for the commands. Here it is. We said we will have availability that should be a date. And we have our date selector. And finally we said we will have file picker for the CV uploads. So that's our file picker and we call it CV. As you can see my screen here on the left-hand side keeps refreshing each time I add a new code. That's thanks to ex-do-tool integration. Basically any time I type a Moosh command here it sends a signal to my Firefox window to refresh. Now there are language strings that are not being translated. I don't have translations for them yet. So it looks pretty bad. But there is a Moosh command generate lang. That basically in the current directory will go through all the language strings. Try to find them and add them to your language file automatically. After this one you need to clear the cache. And finally what we need to do is as you can see we didn't put like there are no values for our select dropdown. So we add them. This is the code of the form class that will generate it. So I will add just the languages let's say PHP, Python and Java. And that's it. So at this stage as you can see the form is ready. It's fully functional form. You can basically make a screenshot out of this. That's what I would do. Just create a screenshot out of that and put that into your proper requirements documentation. So that's pretty much it. That was the full demo live demo of creation of the HTML form that you can use for requirements or you know for another documentation. If you have any other ideas or any insights or questions you can put them here now or basically if you want to share how do you create and do you create for mockups as part of your requirements. And I guess the best place to do it would be to put it under the forum under the appropriate thread. So, thank you very much. Yep. Thank you. Thank you very much. We have one question by Sylvia. I put it in the chat. She's basically asking, which role do you need to have to create Moodle form mockups. I'll share it here on the chat. So you have written. You need to have access to the source code. So the presentation I was showing, that was my local setup on my local development machine. So all the comments that I've been running, they were creating the source code and editing the source code files that then I was displaying. So there is no role. You have to have your development environment set up. Thank you, Tomek. There are no other questions. So I believe we can just finalize this section. Thank you very much for your presentation. Thank you very much. Enjoy the rest of the mood. Thank you all. Thank you.